我尝试将ng-repeat指令与表达式一起使用,以显示单选按钮,当我提交值附加到模型中时,以及当我使用模型中的值重新打开页面时,单选按钮不显示检查。
我已经用平面字符串模型+字符串值实现了相同的功能。但是这次是尝试对象。</ p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>New TRY</p>
<ul>
<li ng-repeat="i in peopleNew.person">
<label>
{{i}}
<input type="radio" ng-model="peopleServer.person"
name="same" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
JS代码
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.peopleNew ={
person: {
"name": "Ringo",
"id": "R",
"subj": "Sci"
}
}
$scope.peopleServer= {
person: {"name":"Ringo"}
}
});
如上所述,我应该在屏幕上有4个单选按钮,我可以选择1个并提交。然后,当我再次在模型中打开该人时,该人具有正确的值,该值已通过ng-value
保存,但仍在UI上,我没有看到应选中名称Ringo的单选按钮。模特有:
$scope.peopleServer= {
person: {name:"Ringo"}
}
尝试过的解决方案
有人帮助您了解,当您重新加载模型或模型中已有值时,如何选择单选按钮
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.peopleNew ={
person: {
"name": "Ringo",
"id": "R",
"subj": "Sci"
}
}
//uncomment for testing.
$scope.peopleServer= {
person: {"name":"Ringo"}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>New TRY</p>
<ul>
<li ng-repeat="i in peopleNew.person">
<label>
{{i}}
<input type="radio" ng-model="peopleServer.person"
name="same" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
自动吗?我上面的所有尝试都没有用,我是否缺少某些东西。
答案 0 :(得分:0)
您有一些语法错误,缺少模型值和一些不必要的标记。首先,您可以完全摆脱ng-checked
。如果您正确设置ng-model
和ng-value
,将自动处理该问题。由于您的对象是唯一的,因此不需要track by
。
使用AngularJS指令(例如ng-value
)时,不需要使用花括号来引用模型值。因此ng-value="{{person}}"
成为ng-value="person"
。
您引用了myObj.person
,但似乎没有相应的模型值。下面是您提供的代码和标记的编辑,显示使用对象作为单选按钮的值确实有效。
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.people = [{
name: "John",
id: "J"
}, {
name: "Paul",
id: "P"
}, {
name: "George",
id: "G"
}, {
name: "Ringo",
id: "R"
}];
$scope.myObj = {
person: $scope.people[1]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>Decisions</p>
<ul>
<li ng-repeat="person in people">
<label>
{{ person.name }}
<input type="radio" ng-model="myObj.person"
name="sameName" ng-value="person" />
</label>
</li>
</ul>
</form>
<div>
{{ myObj.person }}
</div>
</div>