我正在开发一个排名系统,用户可以从选择框中对图像进行排名,但我想限制用户不要为多个图像选择相同的排名。我通过以下方法得到了这个。
我有错误信息div set ng-show =" showError"当用户为第一个图像和第二个图像选择等级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;
});
}
};
}])
由于