在单选按钮的模板中分配动态 ng 模型

Question

我使用指令来添加图像和单选按钮(每个图像(。我还创建动态ng模型。现在使用我的方法，单选按钮将不会被设置。怎么了？感谢您的提示。

.JS

.directive('oct', function() {
  return {
    restrict : 'E',
    template : `
      <div class="oImg" ng-repeat="image in images">
        <a href="#" class="removeImage" ng-click="vm.removeImg(image)"
           ng-show="isActive($index)"><i class="fa fa-trash"></i>
        </a>
        <img ng-src="{$image.src$}" class="images-item" 
             ng-show="isActive($index)"><span ng-show="isActive($index)" class="imgName">{$image.name$}</span>
        <div class="sideSelect" ng-show="isActive($index)">
          <div class="checkbox"><label>
            <input type="radio" ng-model="eyeChanger[image.name]"
                   name="optionsEye"
                   ng-change="vm.changeEye(image, eyeChanger[image.name])"
                   value="RA">RA</label>
          </div>
          <div class="checkbox"><label>
            <input type="radio" ng-model="eyeChanger[image.name]" 
                   ng-change="vm.changeEye(image, eyeChanger[image.name])" 
                   name="optionsEye" value="LA">LA</label>
          </div>
        </div>
      </div>
    `,

    controller : ['$scope', '$http',
      function($scope, $http) {
        $scope._Index = 0;
        // if current image is same as requested image
        $scope.isActive = function(index) {
            return $scope._Index === index;
        };
        // prev image
        $scope.showPrev = function() {
            if ($scope._Index != 0) {
                $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.images.length - 1;
            }
        };
        // next image
        $scope.showNext = function() {
            if ($scope._Index < $scope.images.length - 1) {
                $scope._Index = ($scope._Index < $scope.images.length - 1) ? ++$scope._Index : 0;
            };
        };
    }]
  };
})

vm.changeEye = function(img, value) {
   $scope['eyeChanger'+img.name] = value;
   ...

Answer 1

使用：

vm.changeEye = function(img, value) {
   ̶$̶s̶c̶o̶p̶e̶[̶'̶e̶y̶e̶C̶h̶a̶n̶g̶e̶r̶'̶+̶i̶m̶g̶.̶n̶a̶m̶e̶]̶ ̶=̶ ̶v̶a̶l̶u̶e̶;̶
   $scope.eyeChanger[img.name] = value;
   ...

无需使用 ng-change 执行此操作，因为 ng-model 指令会自动执行此操作。

<div ng-repeat="image in images">
    <img ng-src="{{image.src}}" />
    <div class="checkbox"><label>
        <input type="radio" ng-model="eyeChanger[image.name]"
               name="optionsEye"
               ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶v̶m̶.̶c̶h̶a̶n̶g̶e̶E̶y̶e̶(̶i̶m̶a̶g̶e̶,̶ ̶e̶y̶e̶C̶h̶a̶n̶g̶e̶r̶[̶i̶m̶a̶g̶e̶.̶n̶a̶m̶e̶]̶)̶"̶
               value="RA">RA</label>
    </div>
    <div class="checkbox"><label>
        <input type="radio" ng-model="eyeChanger[image.name]" 
               ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶v̶m̶.̶c̶h̶a̶n̶g̶e̶E̶y̶e̶(̶i̶m̶a̶g̶e̶,̶ ̶e̶y̶e̶C̶h̶a̶n̶g̶e̶r̶[̶i̶m̶a̶g̶e̶.̶n̶a̶m̶e̶]̶)̶"̶ 
               name="optionsEye" value="LA">LA</label>
    </div>
</div>

单选按钮可以初始化：

$scope.images = [
    { name: "name1", src: "..." },
    { name: "name2", src: "..." },
    // ...
];
$scope.eyeChanger = {
    name1: "RA",
    name2: "LA",
    // ...
};