ng-model作为数组的返回值？

我是Angular的新手。我正在找一种方法将ng-model的值作为数组返回。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' 
}

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

[ 
    { 
    name: 'A' 
    } 
]

我发现select[multiple]正在做我想做的。所以我不知道是否有任何内置方法可以在单个选择上做到这一点。

来源

2017-02-17 R Lam

只要有两个选项，第一，如果绑定到数组的数组，第二个是manualy形成从所选择的值的数组：

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

来源

2017-02-17 03:17:44 Yaser

谢谢您的回答。对我而言，这不是一个最好的方法。模型值更改时是否可以修改模型值？就像'jQuery'中的on（'change'）'一样。所以我可以在那里做一些“回调”。 –

您不要在线交流，我会添加其他解决方案 – Yaser

谢谢！但我决定使用'custom directive'来做这个，因为我认为如果它是可重用的，它会更好。 –

我认为如果它是可重用的，它会更好。所以我决定使用自定义指令来做到这一点。

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>

来源

2017-02-17 06:33:13

ng-model作为数组的返回值？

回答

相关问题