如何使用AngularJS设置数组对象int json对象？

Question

我要从多重选择控件中加载数组对象，然后我要加载名为“名称”的模型对象及其名称和年龄值，然后我要从select中加载数组并在模型对象中加载...。但是从select中选择ng-model控制无效：/

<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." />
<input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." />

<!--Select pets for model person-->
<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
   <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
</select>


<script>
   var app = angular.module("myApp", []);
   app.controller("myCtrl", function($scope) {

    $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };

    $scope.arrayFromApi = function() {
          ......
        this function get id names
     }
 });
 </script>

Answer 1

您可能需要使用ng-options。 您可以尝试使用ng-repeat，但是它应该仅在选项标签上。

Answer 2

避免在下拉列表上使用ng-repeat，因为它会引起一些性能问题。 而是使用ng-options。

为了给模特提供名字，年龄和宠物。 检查mixData功能。

    <input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." />
    <input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." />

    <!--Avoid ng-repeat in dropdowns-->
    <!--Select pets for model person-->
    <select ng-change="mixData()" class="selectpicker" multiple ng-model="myPets" ng-options="pet.id as pet.name for pet in arrayFromApi">
       <option value="">Select...</option>
    </select>

    <!--<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
       <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
    </select>-->


    <script>
       var app = angular.module("myApp", []);
       app.controller("myCtrl", function($scope) {

        $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };

        $scope.arrayFromApi = function() {
              ......
            this function get id names
         }

        $scope.mixData = function(){
           $scope.model.pets = $scope.myPets;
        };
     });
     </script>

Answer 3

如果将select作为角度标准ng-options与此属性一起使用，则可以更好地处理视图中的所有内容，并将多类型返回数组作为{id: n}

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.model = {}; //from api $scope.arrayFromApi = [{ id: 1, name: 'test' }, { id: 2, name: 'test2' } ]; $scope.getDetails = function() { console.log($scope.model); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="model.name" placeholder="Put your name..." /> <input type="text" ng-model="model.age" placeholder="Put your age..." /> <!--Select pets for model person--> <select ng-model="model.pets" ng-options="{id: item.id} as item.name for item in arrayFromApi" multiple></select> <button ng-click="getDetails()">save</button> </div>