gpt4 book ai didi

javascript - 如何使复选框在 ng-repeat 中表现得像单选按钮?

转载 作者:搜寻专家 更新时间:2023-10-31 21:55:27 25 4
gpt4 key购买 nike

我在 ng-repeat 中使用 Checkbox 时遇到了像单选按钮一样的问题。选择和取消选择框,一次只会选择一个框。它在 没有 Ng-repeat 的情况下工作。 但我想在 ng-repeat 中使用它。

这是我的 HTML 文件:

<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.1.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1> WithOut ng-repeat </h1>
<input type="checkbox" ng-checked="model1=='11'" ng-click="model1='11'"> a
<br/>
<input type="checkbox" ng-checked="model1=='12'" ng-click="model1='12'"> b
<br/>
<input type="checkbox" ng-checked="model1=='13'" ng-click="model1='13'"> c
<br>
Model = {{model1}}
<h1> With ng-repeat </h1>
<div data-ng-repeat="p in pp.rate">
<input type="checkbox" ng-checked="model=='{{p.price}}'"
ng-click="model='{{p.price}}'">
Model = {{model}}
</div>
</body>
</html>

这是我的 Controller :

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.pp = {
rate: [ {price: '11'},
{price: '12'},
{price: '13'}
]
};
});

这是我的 Plunker 链接 http://plnkr.co/edit/BUHPNjTGaIsG33hsSWeC?p=preview

请给我一个解决方案提前致谢。

最佳答案

我今天遇到了同样的问题,我终于找到了一个很好的解决方案:

<div data-ng-repeat="p in pp.rate">
<input type="checkbox" ng-model="result.price" ng-true-value="{{p.price}}" ng-false-value="" >
{{p.plan}}
</div>

plunkr 演示 http://plnkr.co/edit/qLlFBhnUdzTnAu1U71uk?p=preview

希望对你有帮助,或者以后对其他人有帮助

玩得开心!

关于javascript - 如何使复选框在 ng-repeat 中表现得像单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26461390/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com