Question

我是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>
                            <!--  Environment -->
                            <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>

                            <!--  cluster Name -->
                            <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>
                            <!-- submit button -->  
                        <section class="col-md-12">
                            <button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
                        </section>
                    </form> 
                    </div>                      
                    <!--  table -->
                    <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>

Answer 1

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

        $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/

AngularJS从选项中选择值并添加到数组

1 个答案: