Angularjs - radio button show weird action inside of ng-repeat

Question

I have an array which has objects, comes from server.

And I have to make list with this array.

I want to set default value to each radio button,

but only the last item has default value.

Please see my 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>

and this is fiddle .

What did I miss?

I've tried to find answer, but I could not find similar with mine.

How to set default value to all items?

Thanks in advance.

Answer 1

All radio buttons share the same three name attribute values. So you've mistakenly put them into groups. This means when you click one radio (setting it to true) the browser automatically sets all other radios to false that are in the same group.

Clicking on the radios will show you this fact. You need to use different name attribute values. Note my use of {{$index}} in the below example:

 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> 

Answer 2

There should be different name attributes for each iteration of the product.

For example, instead of just send_num , you can name the radio of the first product to be send_num_1291803 , send_num_2365123 for the second product, and so on.

Here is some sample 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

Controller:

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

Answer 3

Your radio button's has the same name when you're performing loop. That's why the last item will be only selected.

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