Question

我在动态创建div，同时单击包含一些无线电输入的按钮。在控制器中，我有一个divs数组，最初的长度为1。

'use strict';

angular.module('load').controller(
        'commodityController',

        function($scope, $http, $state, $stateParams) {
            $scope.parentload = $scope.$parent.load;

            $scope.addMoreCommodities = function() {
                $scope.parentload.loadCommodities.push({
                    'isHazmat' : false,
                    'dimension' : 'IN'
                });
            }

            $scope.parentload.loadCommodities = []; // emtry array
            $scope.addMoreCommodities();    // Here initialize the array 

            $scope.changeHazmat = function(booleans, val) {
                console.log("booleans " + booleans);
                console.log("isactive " + val);
                $scope.parentload.loadCommodities[val].isHazmat = booleans;
            };  
        });

使用以下html，同时加载页面div填充好，

<div class="form-right-card disabledInput" ng-init="showname==true" id="commodityContent">
    <form name="commodityAttForm">
        <div ng-repeat="loadCommodities in load.loadCommodities">
            <div class="form-group33"> {{$index}} // here value prints correctly
                <label class="form-label">Hazmat</label> 
                <input type="radio" class="form-btn-inactive" ng-click="changeHazmat('true',$index)" id="yes" name="hazmat" /> 
                <label class="plsLabel" for="yes">Yes</label> 
                <input type="radio" class="form-btn-inactive" ng-click="changeHazmat('false',$index)" id="no" name="hazmat" />
                <label class="plsLabel" for="no">No</label>
            </div>
        </div>
    </form>
</div>

<button class="form-btn-link" ng-click="addMoreCommodities()">+ Add Commodity</button>

单击按钮时，我可以使用所有输入生成div。问题是，我将$index发送到单选按钮ng-click上的控制器，同时单击单选按钮，我在调用函数changeHazmat('true',$index) 这里索引总是0，即使我有一个长度大于1的数组。

       $scope.changeHazmat = function(selected, val) {
            console.log("val" + val);
            $scope.parentload.loadCommodities[val].isHazmat = selected;

日志始终将索引打印为0。

有人可以帮助我吗，我做错了什么？

Answer 1

您正确传递了$index控制器，代码应该可以正常工作。

但我建议ngModel使用ngValue指令。

 <input type="radio" ng-model="loadCommodities.isHazmat" ng-value=true name="hazmat" />

＆＃13;

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', ['$scope', function($scope, ) {
      $scope.parentload = {
        loadCommodities: []
      };

      $scope.addMoreCommodities = function() {
        $scope.parentload.loadCommodities.push({
          'isHazmat': false,
          'dimension': 'IN'
        });
      }
      $scope.addMoreCommodities();

      $scope.changeHazmat = function(booleans, val) {
        $scope.parentload.loadCommodities[val].isHazmat = booleans;
      };
    }]);
})(window.angular);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <div ng-repeat="loadCommodities in parentload.loadCommodities">
      <div class="form-group33">
        <label class="form-label">Hazmat</label>
        
        <input type="radio" ng-model="loadCommodities.isHazmat" ng-value=true name="hazmat" />
        <label class="plsLabel" for="yes">Yes</label>
        
        <input type="radio" ng-model="loadCommodities.isHazmat" ng-value=false name="hazmat" />
        <label class="plsLabel" for="no">No</label>
      </div>


      <p>{{parentload.loadCommodities}}</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我想知道问题是你是否正在分配相同的＆＃34; id＆＃34; （＆＃39;是＆＃39;和＆＃39; no＆＃39;）到多个div（即在循环内）。这可能是$ index不适合你的原因。如果您暂时删除了ID并重新尝试，我认为问题就会消失。

如何在Angular

2 个答案: