如何使用ng-repeat在匹配元素上添加活动类

时间:2016-03-30 23:26:45

标签: javascript jquery angularjs angularjs-directive angularjs-ng-repeat

我正在进行多下拉选择,但它也允许单独选择列表项。它不是一个选择元素,而是一个将数据保存在角度分量中的tr。

我在ctrl.checkEquality中使用控制器内的angular.equals来查看当前行和通过ng-model传入的值是否相同,如果他们然后选择的行获得活动的绿色类。我基本上想知道我是否可以使用我的代码执行类似操作但设置ng-model,以便在按下“ctrl”键时将该活动类应用于多个选定值的数组。

 <tr ng-repeat="row in ctrl.filteredItems" ng-class="{'active': ctrl.checkEquality(row, ctrl.ngModel) ng-mousedown="ctrl.onSelectedLocal(row, $event)">
 </tr>

  public onSelectedLocal(row: ng.IAugmentedJQuery, $event: ng.IAngularEvent) {
        if ($event["ctrlKey"]) {
            this.setFocusedRow(-1);
            this.filterText = "";

            // if (this.selectedItems.indexOf(row) === -1) {
            //  this.selectedItems.push(row);
            //  for (var i = 0; i < this.filteredItems.length; i++) {
            //      if (this.filteredItems[i] === row) {

            //      }
            //  }
            // }

            if (this.ngChange) {
                this.ngChange({ itemSelected: row });
            }

            console.log(this.selectedItems);

            //we need to make sure the click event of selecting an item in the dropdown stops here 
            //otherwise it will run into the resetInput function below and not show the selected city in the input element when filterText is used
            $event.preventDefault();
            $event.stopPropagation();

        }  else {
            this.setFocusedRow(-1);
            this.filterText = "";
            this.ngModel = row;
            this.ngModelValue = (this.showSelectedItem === false) ? "" : row[this.itemDisplayProperty];

            if (this.ngChange) {
                this.ngChange({ itemSelected: row });
            }

            this.filteredItems = this.items; //reset filteredItems back to initial items
            this.closeDropdown();

            //we need to make sure the click event of selecting an item in the dropdown stops here 
            //otherwise it will run into the resetInput function below and not show the selected city in the input element when filterText is used
            $event.preventDefault();
            $event.stopPropagation();
        }

我需要在任何匹配的行上设置一个“活动”类(或其他),就像我目前在ng-class'active'类中所做的那样但是如果用户按住ctrl键,我需要能够只要按住ctrl,就可以将该活动类添加到所有tr。

我的ng-model此时不是一个数组,它目前只根据用户选择一个元素而保留一个值。

我该怎么做?非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我认为您在ng-class代码的tr末尾错过了结束标记。

<tr ng-repeat="row in ctrl.filteredItems" ng-class="{'active': ctrl.checkEquality(row, ctrl.ngModel)" ng-mousedown="ctrl.onSelectedLocal(row, $event)">