【问题标题】:What is difference in ways of setting radio button checked=true in AngularJS在AngularJS中设置单选按钮checked=true的方式有什么区别
【发布时间】:2017-02-05 09:39:32
【问题描述】:
如果我使用ng-checked="$first" 设置单选按钮默认选择,那么它会被选中。如果我使用ng-checked="true" 单选按钮不会被选中?
请解释一下什么时候会发生这种情况?
我不能根据我的用例使用$first
【问题讨论】:
标签:
angularjs
angularjs-ng-checked
【解决方案1】:
单选按钮一旦选中就需要注意,它们不能被取消选中。您必须提供其他选项。我为你准备了一些样品。
在第一种方法中,尽管我在控制器中将值设置为 true 并将值设置为 1,但它得到了检查。这是最优化的解决方案。
使用 ng-checked 的第二种方法,即使我更改了值但 ng-model 值没有更新。所以你必须使用 ng-change 功能并跟踪每个 ng-model。个人不喜欢这种方法。
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.myradio = true;
$scope.myradio_ng1 = true;
$scope.myradio_ng2 = false;
$scope.first = true; // probably you are getting this from db
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Radio</title>
</head>
<body ng-controller="MainCtrl">
<p>1. Using ng-model</p>
<div>
<label for="myradio1">Yes</label>
<input type="radio" ng-model="myradio" name="myradio" id="myradio1" value="1" />
<label for="myradio2">No</label>
<input type="radio" ng-model="myradio" name="myradio" id="myradio2" value="0"/>
</div>
<div>Radio value: {{myradio}}</div>
<p>2. Using ng-checked</p>
<div>
<label for="myradio3">First</label>
<input type="radio" name="myradiong" id="myradio3" ng-checked="myradio_ng1" />
<label for="myradio4">Second</label>
<input type="radio" name="myradiong" id="myradio4" ng-checked="myradio_ng2"/>
<div>Radio value for first: {{myradio_ng1}}</div>
<div>Radio value for Second: {{myradio_ng2}}</div>
</div>
<p>Your case</p>
<label for="first">First</label>
<input type="radio" id="first" ng-checked="first" />
</body>
</html>
在您的情况下,您有一个要检查的元素是否为真。在您的控制器中将$scope.first 的值设置为true 或false,然后在您的视图中使用ng-checked="first"。运行代码 sn -p 查找结果。