NG模型返回值作为数组

Question

我是Angular的新手。我正在寻找一种将NG模型值作为数组返回的方法。

<select ng-options="district.name for district in districts" ng-model="district"></select>
$scope.districts = [
    {
      name: 'A'
    },
    {
      name: 'B'
    },
    {
      name: 'C'
    }
]

因此，当我选择其中一个选项时，它将将对象存储在district中。

{
 name: 'A'
}

但是我想要的是一个存储对象的数组。就像

[
  {
   name: 'A'
  }
]

我发现select[multiple]正在做我想做的事情。所以我想知道是否有任何构建方法可以在单个选择上执行此操作。

Answer 1

只有两个选项，首先是绑定到数组数组的数组，其次是从选定值手动形式的数组：

(function() {
  'use strict';
  angular
    .module('exampleApp', [])
    .controller('ExampleController', ExampleController);
  function ExampleController() {
    var vm = this;
    vm.dropDownValues = [[{
      value: "Cat",
      name: "Cat"
    }], [{
      value: "Dog",
      name: "Dog"
    }]];
    vm.animal = vm.dropDownValues[0];
    /*
    // probably easier to just select the first element
    vm.animal = vm.dropDownValues[0].value;
    */
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp">
  <div ng-controller="ExampleController as vm">
    <select ng-model="vm.animal" ng-options="animal as animal[0].value for animal in vm.dropDownValues">
  </select>
  
  <span>{{vm.animal}}</span>
  
  </div>
</div>

另一个选项：

(function() {
  'use strict';
  angular
    .module('exampleApp', [])
    .controller('ExampleController', ExampleController);
  function ExampleController() {
    var vm = this;
    vm.dropDownValues = [{
      value: "Cat",
      name: "Cat"
    }, {
      value: "Dog",
      name: "Dog"
    }];
    vm.animal = "Cat";
    vm.actualModel = [];
    
    vm.modelChanged = function(animal) {
    console.log(animal);
      vm.actualModel = [animal];
    };
    /*
    // probably easier to just select the first element
    vm.animal = vm.dropDownValues[0].value;
    */
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp">
  <div ng-controller="ExampleController as vm">
    <select ng-model="vm.animal" 
      ng-change="vm.modelChanged(vm.animal)"
       ng-options="animal as animal.name for animal in vm.dropDownValues">
  </select>
  
  <span>{{vm.animal}}</span>
  <div>{{vm.actualModel}}</div>
  
  </div>
</div>

Answer 2

我认为如果可以重复使用它会更好。因此，我决定使用自定义指令来执行此操作。

var exampleApp = angular.module('exampleApp', []);
exampleApp.directive('ngModelToarray', function () {       
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
         scope.$watch(function () {
            return ngModel.$modelValue;
         }, function(newValue) {
            if( newValue && !Array.isArray(newValue) )
              ngModel.$setViewValue([newValue]);
         });
    }
  }
});   
exampleApp.controller('ExampleController', function ExampleController($scope) {
  $scope.districts = [
      {
        name: 'A'
      },
      {
        name: 'B'
      },
      {
        name: 'C'
      }
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp">
  <div ng-controller="ExampleController">
    <select ng-options="district.name for district in districts" ng-model="selectedDistrict" ng-model-toarray></select>
    <p>{{selectedDistrict}}</p>
  </div>
</div>