Angularjsをクリックすると、4つ以上が選択されたときに警告するメッセージが表示されます

大きなanglejsアプリを持っています... 4 divを1回だけ選択できるようにしようとしています。 ...Angularjsをクリックすると、4つ以上が選択されたときに警告するメッセージが表示されます

ここ

は

HTML

<body ng-app="ap" ng-controller="con"> 
    <table id="myTable"> 
     <tbody> 
     <tr data-ng-repeat="field in fieldList"> 
      <td> 
      <span>{{field.name}}</span> 
      </td> 
      <td style="width: 15px;"> 
      <div ng-click="$('.tick').length >= 4 ? (!selected) : (selected = !selected)" ng-class="{'notick' : !selected, 'tick': selected}"></div> 
      </td> 
     </tr> 
     </tbody> 

    </table> 
</body>

、私がこれまでに達しているところ

JSです

var app = angular.module("ap", []); 

app.controller("con", function($scope) { 
    $scope.fieldList = [{ 
    id: 0, 
    name: "Number 1" 
    }, { 
    id: 1, 
    name: "Number 2" 
    }, { 
    id: 2, 
    name: "Number 3" 
    }, { 
    id: 3, 
    name: "Number 4" 
    }, { 
    id: 4, 
    name: "Number 5" 
    }]; 
});

CSS

.tick { 
    color: red; 
} 

.notick { 
    color: grey; 
}

実際のコードが異なっているが、私は、ユーザーが唯一のそれ以外のアラートがすべき任意の時点で4つのdivを選択することができるはず、それはできるだけ密接にここで働い作ってみましたそれらを停止、

JSFiddle - http://jsfiddle.net/baa2G/110/

出典

2017-01-20 Mathematics

あなたは、角度でjQueryの構文を混合好まれるべき次の角の構文でこれを達成することができます。

あなたのhtmlの変更が

<tr data-ng-repeat="field in fieldList"> 
      <td> 
      <div ng-click="checkCount($index)" ng-class="{'tick' : field.clicked}">{{field.name}}</div> 
      </td> 
     </tr>

P.Sになります：私はwnereテキストにイベントを置くために、単一のtd要素が表示され続けています。

とコントローラ内にあります。

$scope.checkCount = function(index) { 
    if ($scope.fieldList[index].clicked !== true) { 
     if ($scope.clickedElement === 4) { 
     alert("Only 4 div can be selected.") 
     } else { 
     $scope.fieldList[index].clicked = true; 
     $scope.clickedElement++; 
     } 
    } 
    else 
    { 
    $scope.fieldList[index].clicked = false; 
    $scope.clickedElement--; 
    } 
    }

フィドル：

出典

2017-01-20 15:48:15 Deep

http://jsfiddle.net/hudrozxd/1/が、それは私の問題の半分を解決し、どうもありがとうございましたが、私は私はあなたのコード:(、+1で行うことができないのです反転させることができ、これらのクリックにしたいです努力 – Mathematics

@Mathematicsあなたはそれのための他の条件を追加する必要があります。 – Deep

Angularjsをクリックすると、4つ以上が選択されたときに警告するメッセージが表示されます

答えて

関連する問題