0

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

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;
   ...
4

1 回答 1

2

采用：

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",
    // ...
};
于 2019-11-23T17:01:17.610 回答