Angularjs

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。

点击收音机就会告诉你这个事实。您需要使用不同的 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_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>

Angularjs - 单选按钮在 ng-repeat 中显示奇怪的动作

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

javascript

radio-button

angularjs-ng-repeat