ng-Modell Rückgabewert als Array?

Question

Ich bin neu in Angular. Ich finde einen Weg, den ng-Modellwert als ein Array zurückzugeben.

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

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

So wird es ein Objekt in district speichern, wenn ich einer der Option auswählen.

{ 
name: 'A' 
} 

Aber was ich will, ist ein Array Speicherung Objekt. Genau wie

[ 
    { 
    name: 'A' 
    } 
] 

Ich fand, dass select[multiple] tut, was ich will. Also frage ich mich, ob es irgendeine eingebaute Methode gibt, die dies in einer einzigen Auswahl tun kann.

Answer 1

haben nur zwei Optionen, zuerst, wenn auf ein Array von Arrays zu binden, die zweiten manuell die das Array von dem ausgewählten Wert bilden:

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

Die andere Option:

(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

Ich denke, es wird besser sein, wenn es wiederverwendbar ist. Also entschied ich mich dafür, eine benutzerdefinierte Anweisung zu verwenden.

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>