javascript - Angularjs - 单选按钮在 ng-repeat 内显示奇怪的 Action

Question

我有一个包含对象的数组，来自服务器。

我必须用这个数组制作列表。

我想为每个单选按钮设置默认值，

但只有最后一项有默认值。

请查看我的代码。

    <div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
        <div class="radio-box">
            <input type="radio" name="send_num" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
            <input type="radio" name="send_num" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
        </div>
        <div class="radio-box">
            <input type="radio" name="send_res" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
            <input type="radio" name="send_res" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
        </div>
        <div class="radio-box">
            <input type="radio" name="receive" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
            <input type="radio" name="receive" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
        </div>
    </div>

和this is fiddle .

我错过了什么？

我试图找到答案，但找不到与我类似的答案。

如何为所有项目设置默认值？

提前致谢。

Answer 1

所有单选按钮共享相同的三个 name 属性值。所以你错误地将它们分组。这意味着当您单击一个单选按钮(将其设置为 true)时，浏览器会自动将同一组中的所有其他单选按钮设置为 false。

点击 radio 就会告诉你这个事实。您需要使用不同的 name 属性值。请注意我在下面的示例中使用的 {{$index}}:

var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope){
	$scope.cartProducts = [
		{product_id:1291803},
		{product_id:2365123},
		{product_id:5463434},
		{product_id:8752642},
		{product_id:4566484}
	];
	$scope.initDefValue = function () {
        angular.forEach($scope.cartProducts, function (product) {
            product.isBasicNum = true;
            product.isImmediateSend = true;
            product.isDirectEnterNum = true;
            product.isRecieveDupable = true;
            product.isBasicBanner = true;
        });
    };
	$scope.initDefValue();
});

.item-box {
	border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
	<div ng-controller="MyController">
		<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
			<div class="radio-box">
				<input type="radio" name="send_num{{$index}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
				<input type="radio" name="send_num{{$index}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
			</div>
			<div class="radio-box">
				<input type="radio" name="send_res{{$index}}" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
				<input type="radio" name="send_res{{$index}}" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
			</div>
			<div class="radio-box">
				<input type="radio" name="receive{{$index}}" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
				<input type="radio" name="receive{{$index}}" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
			</div>
		</div>
	</div>
</div>