javascript - 如何将索引值从 Angular 中的 ng-repeat 传递给 Controller

Question

我正在动态创建 div，同时单击一个包含一些单选输入的按钮。在 Controller 中，我有一个用于 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。问题是，我在单选按钮的 ng-click 上将 $index 发送到 Controller ，同时单击单选按钮，我正在调用函数 changeHazmat ('true',$index) 此处索引始终为 0，即使我的数组长度大于 1。

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

Log 始终将索引打印为 0。

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

Answer 1

您正确地将 $index 传递给 Controller ​​，代码应该可以工作。

但是我建议使用 ngModel与 ngValue指令。

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

(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);

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