Question

我是Angular的新手。我找到了一种将ng-model值作为数组返回的方法。

<select ng-options="district.name for district in districts" ng-model="district"></select>

$scope.districts = [
    {
      name: 'A'
    },
    {
      name: 'B'
    },
    {
      name: 'C'
    }
]

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

{
 name: 'A'
}

但我想要的是存储Object的数组。就像

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

ng-model返回值为数组？

2 个答案: