選擇選項不與ng-model綁定

Question

我有一個AllCountries和SelectedCoutry對象。 我想在<select>上列出所有國家/地區，然后通過SelectedCountry的值選擇具有ng-model的選項。

但是combobox的默認值選擇為null。

例：

 angular.module('ngPatternExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.OBJ = { "OBJ": { "AllCountries": [ { "country": "USA", "id": 1 }, { "country": "Mexico", "id": 2 }, { "country": "Canada", "id": 3 } ], "SelectedCountry": { "country_id": 1, } } } $scope.AM = $scope.OBJ.OBJ; }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="ngPatternExample"> <div ng-controller="ExampleController"> selected country: {{AM.SelectedCountry.country_id}} <br/> <select class="form-control" ng-model="AM.SelectedCountry.country_id"> <option value=""> --- </option> <option ng-repeat="co in AM.AllCountries" value="{{co.id}}"> {{co.country}} </option> </select> </div> </body>

（ http://plnkr.co/edit/PI3tOrIMSTMwGC0rYA5q?p=preview ）

ps一個很好的解釋，為什么這在Angular中始終無法正常工作

Answer 1

替換您的選擇與此

<select class="form-control"  ng-options="co.id as co.country for co in OBJ.OBJ.AllCountries" ng-model="AM.SelectedCountry.country_id">
    <option value=""> --- </option>
</select>

Answer 2

使用ngOptions指令，而不要自己在選擇框中重復選項。

<select 
  class="form-control"
  ng-model="AM.SelectedCountry.country_id"
  ng-options="co.id as co.country for co in AM.AllCountries">
    <option value=""> --- </option>
</select>

更新的插件： http ://plnkr.co/edit/FZcJVkJQlbLM3k544s8S? p= preview

選擇選項不與ng-model綁定

問題描述

2 個解決方案

解決方案1
3 已采納 2016-03-18 09:23:43

解決方案2
2 2016-03-18 09:24:18

選擇選項不與ng-model綁定

問題描述

2 個解決方案

解決方案1 3 已采納 2016-03-18 09:23:43

解決方案2 2 2016-03-18 09:24:18

解決方案1
3 已采納 2016-03-18 09:23:43

解決方案2
2 2016-03-18 09:24:18