J'ai un tableau qui a des objets, vient du serveur.

Et je dois faire une liste avec ce tableau.

Je veux définir une valeur par défaut pour chaque bouton radio,

Mais seul le dernier élément a une valeur par défaut.

Veuillez voir mon code.

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

Et c'est du violon.

Qu'est-ce que j'ai raté?

J'ai essayé de trouver une réponse, mais je n'ai pas trouvé de solution similaire avec la mienne.

Comment définir la valeur par défaut pour tous les éléments?

Merci d'avance.

0
Canet Robern 17 avril 2018 à 07:22

3 réponses

Meilleure réponse

Tous les boutons radio partagent les trois mêmes valeurs d'attribut name. Vous les avez donc par erreur regroupés. Cela signifie que lorsque vous cliquez sur une radio (la définissant sur true), le navigateur définit automatiquement toutes les autres radios sur false qui sont dans le même groupe.

Cliquer sur les radios vous montrera ce fait. Vous devez utiliser différentes valeurs d'attribut name. Notez mon utilisation de {{$index}} dans l'exemple ci-dessous:

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>
2
Randy Casburn 17 avril 2018 à 04:29

Il devrait y avoir différents name attributs pour chaque itération du produit.

Par exemple, au lieu de simplement send_num, vous pouvez nommer la radio du premier produit comme send_num_1291803, send_num_2365123 pour le deuxième produit, etc.

Voici un exemple de code:

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

Manette:

$scope.getSendNumName = function(product) {
    return 'send_num_' + product.product_id;
}
1
OJ Raqueño 17 avril 2018 à 04:34

Votre bouton radio porte le même nom lorsque vous effectuez une boucle. C'est pourquoi le dernier élément sera uniquement sélectionné.

Essayez ce code

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();
});
.item-box {
	border: 1px solid red;
}
<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>
1
Vince Llauderes 17 avril 2018 à 04:38