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）时，浏览器会自动将所有其他无线电设置为同一组中的假。

点击无线电将向您显示此事实。您需要使用不同的name属性值。请注意我在以下示例中使用{{$index}}：

＆＃13;

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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

产品的每次迭代都应该有不同的name属性。

例如，您可以将第一个产品的广播命名为send_num，将send_num_1291803命名为第二个产品，而不仅仅是send_num_2365123，依此类推。

以下是一些示例代码：

HTML：

<input type="radio" name="{{getSendNumName(product)}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="{{getSendNumName(product)}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B

控制器：

$scope.getSendNumName = function(product) {
    return 'send_num_' + product.product_id;
}

Answer 3

当您执行循环时，您的单选按钮具有相同的名称。这就是为什么只选择最后一项。

试试此代码

＆＃13;

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;
        });
        console.log($scope.cartProducts);
    };
	$scope.initDefValue();
});

＆＃13;

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

＆＃13;

<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

Angularjs - 单选按钮显示ng-repeat

3 个答案: