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作爲數組的返回值？

回答

相關問題