AngularJS of-model 选择错误的 `<option>`

Question

在我的编辑表单上，我希望 select 框 select 具有插入数据库中的值。我正在使用 ng-model select 值问题是它总是 select 第一个选项

来自 angular js

 $scope.form.language_id=2

我的htmlselect盒子

<div class="form-group row" >
    <label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
    <div class="col-sm-10">
        <select  class="form-control" id="language_id" ng-model="form.language_id" name="language_id" required >
            <option ng-repeat="(key,value) in langs" value="{{value.id}}">{{value.languageTitle}}</option>
        </select>
    </div>
</div>

json 图片

要注意的是它总是 select 第一个选项不知道为什么

Answer 1

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.form={"language_id":2};
$scope.langs=[
{"id":1,"languageTitle":"test1"},
{"id":2,"languageTitle":"test2"},
{"id":3,"languageTitle":"test3"},
]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group row" >
<label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
<div class="col-sm-10">
<select  class="form-control" id="language_id" ng-model="form.language_id"
         name="language_id" required
         ng-options="lan.id as lan.languageTitle for lan in langs">
</select>
</div>
</div>
</div>

Answer 2

您应该使用为 select 标签构建的 NgOptions 指令，而不是使用 NgRepeat。

这是一个工作示例

angular.module("app",[]).controller("optionCtrl", function($scope) {
  $scope.form = {};
  $scope.form.language_id = 2;
  $scope.langs = [
  { id: 1,languageTitle: 'Eng' },
  { id: 2,languageTitle: 'Swe' },
  { id: 3,languageTitle: 'Fra' }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>


<div ng-app="app" ng-controller="optionCtrl" class="form-group row" >
 <label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
 <div class="col-sm-10">
  <select class="form-control" 
    id="language_id" 
    ng-model="form.language_id" 
    name="language_id" 
    ng-options="item.id as item.languageTitle for item in langs"
    required >
  </select>
 </div>
</div>

Answer 3

value 属性 returns 字符串和 value.id 是数字。使用 ng-value 不带大括号 {{ }} 插值。

    <select  ng-model="form.language_id" name="language_id" required >
        <option ng-repeat="(key,value) in langs" ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶v̶a̶l̶u̶e̶.̶i̶d̶}̶}̶
                ng-value="value.id">
           {{value.languageTitle}}
        </option>
    </select>

来自文档：

In general, the match between the model and an option is evaluated by strictly comparing the model value against the value of the available options.

If you are setting the option value with the option's value attribute, or textContent, the value will always be a string which means that the model value must also be a string. Otherwise the select directive cannot match them correctly.

To bind the model to a non-string value, you can use one of the following strategies:

the ngOptions directive (select)

the ngValue directive, which allows arbitrary expressions to be option values (Example)

model $parsers / $formatters to convert the string value (Example)

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.form={"language_id":2};
$scope.langs=[
{"id":1,"languageTitle":"test1"},
{"id":2,"languageTitle":"test2"},
{"id":3,"languageTitle":"test3"},
]
});

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="form.language_id" name="language_id" required >
        <option ng-repeat="(key,value) in langs" ng-value="value.id">
           {{value.languageTitle}}
        </option>
    </select>

</body>

有关详细信息，请参阅

AngularJS of-model 选择错误的 `<option>`

AngularJS ng-model selecting wrong `<option>`

angularjs

angularjs-directive