选择选项不绑定ng模型

我有一个AllCountries和SelectedCoutry对象。我想列出<select>上的所有国家，并通过SelectedCountry的值选择带有ng-model的选项。选择选项不绑定ng模型

但是，组合框的默认值被选中为空。

例子：

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很好地解释了为什么这不工作八方通在角将是巨大的

来源

2016-03-18 user3334406

发表在这里SO – Satpal

替换您的选择与此

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

来源

2016-03-18 09:23:43

仍然没有工作 – user3334406

@ user3334406我已经取代了Plunker你'select'什么塔里克·哈桑提出的相关代码，它工作正常。 – Erazihel

从选项中删除ng-repeat –

使用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

来源

2016-03-18 09:24:18 kvetis

选择选项不绑定ng模型

回答

相关问题