AngularJS从选项中选择值并添加到数组(AngularJS select value from options and add to array)

我是AngularJS新手。我想在数组中添加值，并在单击“保存”按钮后在表格中显示这些值。一个是选择菜单，另一个是TextBox。目前，我可以添加文本值但无法获取选定的值。这是我有的：

clusterController.js

apsApp.controller('clusterController', function ($scope) { var uid = 4; $scope.clusters=[ {id:0, 'environment':'DEV', 'cluster':'cluster1'}, {id:1, 'environment':'PROD', 'cluster':'cluster2'}, {id:2, 'environment':'QA', 'cluster':'cluster3'}, {id:3, 'environment':'Linux_Dev', 'cluster':'cluster4'} ]; //add new cluster $scope.saveNewClust = function() { if($scope.clust.id == null) { //if this is new contact, add it in contacts array $scope.clust.id = uid++; $scope.clusters.push($scope.clust); } else { //for existing contact, find this contact using id //and update it. for(i in $scope.clusters) { if($scope.clusters[i].id == $scope.clust.id) { $scope.clusters[i] = $scope.clust; } } }; //clear the add contact form $scope.clust = {}; }; //delete cluster $scope.remove = function(id) { //search contact with given id and delete it for(i in $scope.clusters) { if($scope.clusters[i].id == id) { confirm("This Cluster will get deleted permanently"); $scope.clusters.splice(i,1); $scope.clust = {}; } } }; $scope.edit = function(id) { //search contact with given id and update it for(i in $scope.clusters) { if($scope.clusters[i].id == id) { //we use angular.copy() method to create //copy of original object $scope.clust = angular.copy($scope.clusters[i]); } } }; });

cluster.html

<div class="maincontent"> <div class="article"> <form> <section>  <div class="col-md-6"> <label>Environment:</label> <select ng-model="selectedEnvi" class="form-control" ng-options="clust.environment for clust in clusters"> <option value='' disabled selected style='display:none;'> Select Environment </option> </select> </div>  <div class="col-md-6"> <label>Cluster Name:</label> <input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required> <br/> <input type="hidden" ng-model="clust.id" /> </div> </section>  <section class="col-md-12"> <button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button> </section> </form> </div>  <div class="article"> <table class="table table-bordered table-striped"> <tr> <th colspan="3"> <div class="pull-left">Cluster Info</div> </th> </tr> <tr> <th>#</th> <th>Environment</th> <th>Cluster</th> </tr> <tr ng-repeat="clust in clusters"> <td>{{}}</td> <td>{{clust.environment}}</td> <td>{{clust.cluster}}</td> </tr> </table> </div> </div>

I am new with AngularJS. I want to add values into array and display those in table after clicking on Save button. One is select Menu and other is TextBox. Presently, I am able to add text value but not able to get selected value. Here is what I have:

clusterController.js

apsApp.controller('clusterController', function ($scope) { var uid = 4; $scope.clusters=[ {id:0, 'environment':'DEV', 'cluster':'cluster1'}, {id:1, 'environment':'PROD', 'cluster':'cluster2'}, {id:2, 'environment':'QA', 'cluster':'cluster3'}, {id:3, 'environment':'Linux_Dev', 'cluster':'cluster4'} ]; //add new cluster $scope.saveNewClust = function() { if($scope.clust.id == null) { //if this is new contact, add it in contacts array $scope.clust.id = uid++; $scope.clusters.push($scope.clust); } else { //for existing contact, find this contact using id //and update it. for(i in $scope.clusters) { if($scope.clusters[i].id == $scope.clust.id) { $scope.clusters[i] = $scope.clust; } } }; //clear the add contact form $scope.clust = {}; }; //delete cluster $scope.remove = function(id) { //search contact with given id and delete it for(i in $scope.clusters) { if($scope.clusters[i].id == id) { confirm("This Cluster will get deleted permanently"); $scope.clusters.splice(i,1); $scope.clust = {}; } } }; $scope.edit = function(id) { //search contact with given id and update it for(i in $scope.clusters) { if($scope.clusters[i].id == id) { //we use angular.copy() method to create //copy of original object $scope.clust = angular.copy($scope.clusters[i]); } } }; });

cluster.html

<div class="maincontent"> <div class="article"> <form> <section>  <div class="col-md-6"> <label>Environment:</label> <select ng-model="selectedEnvi" class="form-control" ng-options="clust.environment for clust in clusters"> <option value='' disabled selected style='display:none;'> Select Environment </option> </select> </div>  <div class="col-md-6"> <label>Cluster Name:</label> <input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required> <br/> <input type="hidden" ng-model="clust.id" /> </div> </section>  <section class="col-md-12"> <button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button> </section> </form> </div>  <div class="article"> <table class="table table-bordered table-striped"> <tr> <th colspan="3"> <div class="pull-left">Cluster Info</div> </th> </tr> <tr> <th>#</th> <th>Environment</th> <th>Cluster</th> </tr> <tr ng-repeat="clust in clusters"> <td>{{}}</td> <td>{{clust.environment}}</td> <td>{{clust.cluster}}</td> </tr> </table> </div> </div>

最满意答案

首先，为可能选择的环境选择创建一个自己的数组。现在你从现有的集群列表中获取可能的值（当然，你可以这样做，但我发现它令人困惑！）。我们来看看以下内容：

$scope.environments = [ {name: 'DEV',}, {name: 'PROD',}, {name: 'QA',}, {name: 'Linux_Dev'} ];

此外，您需要在ngModel中为选择值预选一个环境。我们需要这样做，因为在页面加载后，选择框可能显示“DEV”，但它没有将ngModel设置为“DEV”。它仅在手动选择值后更新ngModel。

像这样设置：

$scope.selectedEnvironment = $scope.environments[0];

这将模型“selectedEnvironment”设置为{name：“Dev”}。

选择框：

<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments"> <option disabled value="">-- choose environment --</option> </select>

我将模型设置为“selectedEnvironment”，因此控制器的预选将起作用。我还更改了hg-options以使用包含环境名称的JSON。

最后要做的是对“saveNewClust”函数进行微小更改：

if ($scope.clust.id == null) { //if this is new contact, add it in contacts array $scope.clust.id = uid++; $scope.clust.environment = $scope.selectedEnvironment.name; $scope.clusters.push($scope.clust); }

会发生什么：我们只是将环境名称提供给$ scope.clust.environment。

我制作了一个包含工作演示的小提琴： http ： //jsfiddle.net/hs6Rz/9/

First of all, make an own array for the possible selections of the environment selections. Right now you get the possible values from an existing list of clusters (you can leave it like this of course, but I find it confusing!). Let's just go with the following:

$scope.environments = [ {name: 'DEV',}, {name: 'PROD',}, {name: 'QA',}, {name: 'Linux_Dev'} ];

Furthermore, you need to preselect an environment in ngModel for the select values. We need to do this, because after the page is loaded, the select box maybe shows "DEV", but it doesn't set the ngModel to "DEV". It only updates the ngModel after manually selecting a value.

Set it like this:

$scope.selectedEnvironment = $scope.environments[0];

This sets the model "selectedEnvironment" to {name: "Dev"}.

The selection box:

<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments"> <option disabled value="">-- choose environment --</option> </select>

I set the model to "selectedEnvironment", so the preselection from the controller will work. I also changed hg-options to use the JSON which contains the environment names.

The last thing to do is a minor change on the "saveNewClust" function:

if ($scope.clust.id == null) { //if this is new contact, add it in contacts array $scope.clust.id = uid++; $scope.clust.environment = $scope.selectedEnvironment.name; $scope.clusters.push($scope.clust); }

What happens: We just give the name of the environment to $scope.clust.environment.

I made a fiddle containing the working demo: http://jsfiddle.net/hs6Rz/9/

更多推荐