AngularJS-單選按鈕在ng-repeat中顯示奇怪的動作

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>

這是擺弄 。

我錯過了什么？

我試圖找到答案，但是找不到與我相似的答案。

如何為所有項目設置默認值？

提前致謝。

Answer 1

所有單選按鈕共享相同的三個name屬性值。 所以您錯誤地將它們分組。 這意味着當您單擊一個單選按鈕（將其設置為true）時，瀏覽器會自動將同一組中的所有其他單選按鈕設置為false。

單擊收音機將向您顯示此事實。 您需要使用不同的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> 

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

執行循環時，單選按鈕的名稱相同。 這就是為什么僅選擇最后一項的原因。

試試這個代碼

 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>