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

【问题标题】：How to set array objects int json object with AngularJS?如何使用 AngularJS 设置数组对象 int json 对象？
【发布时间】：2017-09-04 20:08:05
【问题描述】：

我想从多选控件加载数组对象，然后我想用他的名字和年龄值加载名为“name”的模型对象，然后我想从选择加载数组并加载到模型对象中......但是 ng-选择控件中的模型不起作用：/

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

【问题讨论】：

标签： javascript angularjs arrays json model

【解决方案1】：

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

【讨论】：

amm 好的，但我需要在选择标签中设置 ng 重复因为我需要 id 值：/
您将拥有 id 值。您可以在与 ng-repeat 相同的标签中使用迭代器值。顺便说一句，您看起来像 ng-repeat 宠物，然后尝试访问宠物。那可能应该是数组中的宠物......

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：