AngularJS ng-model选择错误的“<option>”

时间:2018-05-24 11:30:12

标签: angularjs angularjs-directive

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

来自角js

 $scope.form.language_id=2

我的html选择框

<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图片 wiki documentation

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

3 个答案:

答案 0 :(得分:1)

&#13;
&#13;
error: bundling failed: SyntaxError: /Users/owner/code/ChatApp/src/App.js: Unexpected token (14:12)
&#13;
npm install --save @types/multer
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您应该使用为select标记构建的map指令,而不是使用NgRepeat。

这是一个有效的例子

<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>
$('#id-of-checkbox').click(function(){
    var checked = $(this).prop('checked');
    $.post('/url-to-ajax-to', {checked: checked}, function(e){
        console.log(e); // do what you need to do afterwards in here
    });
});

答案 2 :(得分:0)

value属性返回字符串,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>

来自文档:

  

通常,通过严格地将模型值与可用选项的值进行比较来评估模型和选项之间的匹配。

     

如果使用选项value属性或textContent设置选项值,则值始终为string,这意味着模型值也必须是字符串。否则select指令无法正确匹配。

     

要将模型绑定到非字符串值,您可以使用以下策略之一:

     
      
  • ngOptions指令(select
  •   
  • ngValue指令,允许任意表达式为选项值(Example
  •   
  • model $ parsers / $ formatters转换字符串值(Example
  •   

&#13;
&#13;
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"},
]
});
&#13;
<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>
&#13;
&#13;
&#13;

有关详细信息,请参阅