Question

我有一个大型的angularjs应用程序...我试图一次性选择4个div，否则最终用户应该收到一条警告，说你不能选择第5个......

这是我到目前为止所处的位置，

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/

Answer 1

你可以使用以下角度语法来实现这一点，这应该优先于在角度中混合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：我保留了单个td元素，以便将事件放在wnere文本上。

并在您的控制器中。

$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--;
    }
  }

小提琴：http://jsfiddle.net/hudrozxd/1/

当选择了4个以上时，Angularjs ng-click表达式会发出警报

1 个答案: