Question

我正在开发一个排名系统，用户可以从选择框中对图像进行排名，但我想限制用户不要为多个图像选择相同的排名。我通过以下方法得到了这个。

我有错误信息div set ng-show =＆＃34; showError＆＃34;当用户为第一个图像和第二个图像选择等级1然后第二个图像显示错误消息时，在页面加载时设置为false。然后，如果使用将第二个图像的等级更改为其他内容，则错误消息将消失。效果很好！

当用户更改没有错误消息的第一张图像的等级时，会出现问题，然后我无法清除第二张图像中的错误消息。

当我必须从分配相同等级的多个图像中清除消息时，它变得更加复杂。

HTML

<div class="thumHolder">
<div ng-repeat="img in data" class="thumbnails" id="thumbnails{{$index+1}}">
    <div class="thumbImg" open-modal>
        <img ng-src="images/thumb/{{img.name}}.jpg">
    </div>
    <div class="thumbInfo">
        <select name="imgRank{{$index+1}}" class="imgRank" id="imgRank{{$index+1}}" ng-model="imgRk" select-on-change>
            <option ng-repeat="r in rankArr" value="{{r}}">{{r}}</option>
        </select>
    </div>
    <div class="errMsg" ng-show="showError">{{errorMags}}</div>
</div>

JS

.directive('selectOnChange', [
function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            scope.$watch('imgRk', function(rnk, oldRnk) {
                if (scope.userRank.indexOf(rnk) !== -1 && rnk !== '0') {
                    scope.showError = true;
                    scope.errorMags = "Rank " + rnk + " is already selected"
                } else {
                    scope.showError = false;
                }
                scope.userRank[scope.$index] = rnk;

            });
        }
    };
}])

由于

Angularjs控制兄弟元素的ng-show

0 个答案: