Question

HTML

<select ng-model="Country" id="Country" class="select2" ng-change="viewState()">
    <option value=''>Select Country</option>
    <option ng-repeat="Country in AllCountry"
            ng-value="[[Country.CountryID]]"
            value="[[Country.CountryID]]">[[Country.CountryName]]
    </option>
</select>

Angulajs

$scope.Country=23;

问题

当我运行此代码时，选择了值，但标签未更改，因此我附上了屏幕截图。

Answer 1

当angularjs将Country的值与value即<option>中的<option value="Country.CountryID">属性进行比较时，就会发生此问题。 Country是数字，而选项的值在string中。简而言之，问题在于类型不匹配。

documentation说

当模型需要绑定到非字符串值时，您必须使用指令明确将其转换（请参见下面的示例），或者使用ngOptions指定选项集。这是因为一个选项元素目前只能绑定到字符串值。

因此，您可以使用ngOptions解决此问题，如随附的代码段所示。

<select name="mySelect" id="mySelect"
  ng-options="option.CountryID as option.CountryName for option in AllCountry" ng-model="Country">
</select>

Answer 2

使用ng-option代替ng-repeat ...的选项...

<select ng-model="Country" id="Country" class="select2" ng-change="viewState()">
    <option value=''>Select Country</option>
    <option ng-repeat="Country in AllCountry"
            ng-value="Country.CountryID"
            value="{{Country.CountryID}}">{{Country.CountryName}}
    </option>
</select>

请使用angular {{}}而不是[[]]进行绑定。...希望它对您有用

$scope.Country=22;
    $scope.AllCountry = {
    "India": {
        "CountryName":"India",
        "CountryID": 1
    },
    "USA": {
        "CountryName":"USA",
        "CountryID": 22
    },
    "USR": {
    "CountryName":"USR",
        "CountryID": 2
    }

Answer 3

HTML

<ui-select ng-model="CountryScope.selected" theme="bootstrap">
    <ui-select-match placeholder="Select or search a person in the list...">[[$select.selected.CountryName]]</ui-select-match>
    <ui-select-choices  repeat="Country in (AllCountry | filter: $select.search) track by Country.CountryID">
       <div ng-bind-html="Country.CountryName | highlight: $select.search"></div>
       <small ng-bind-html="Country.CountryName | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

AngularJS

$scope.AllCountry=[
        {  CountryID: 1, CountryName: 'United States' },
        {  CountryID: 2,  CountryName: 'Argentina' },
        {  CountryID: 3,   CountryName: 'Argentina' }
      ];

设置值

$scope.CountryScope.selected= { CountryID: 2,  CountryName: 'Argentina' };

获得价值

$scope.CountryScope.selected.CountryID

点击此处查看DEMO

点击Reference

选择2标签未使用Angularjs更改

3 个答案: