标签: angularjs-ng-class

我有一个表的ng-repeat,我希望能够在<td>单击时添加一个类,并在单击时删除该类.<td>可以同时选择多个.现在所有的城市都适用或不适用.

例如:(假设节点有100个项目)

<tr ng-repeat node in nodes>
  <td>{{node.name}}</td>
  <td>{{node.date}}</td>
  <td ng-click="toggleMe( node.city )" ng-class"{clicked : isClicked()}" >{{node.city}}</td>
</tr>

在我的JS中

$scope.cityArr = [];

$scope.toggleMe = function(city) {
  if ($scope.count > 0) {
    angular.forEach($scope.cityArr, function(value) {
      if (city === value) {
        $scope.clicked = false;
      } else {
        $scope.cityArr.push(city);
        $scope.clicked = true;
      }
    });
  } else {
    $scope.cityArr.push(city);
    $scope.clicked = true;
  }
  $scope.count = 1;
};

$scope.isClicked = function() {
  return $scope.clicked;
};

我有一些像切换器一样工作的按钮.如果单击一个,它将变为活动状态并"关闭"其他按钮.我使用jQuery做了这个,但想使用AngularJS.这是我的代码:

HTML

<div class="button-bar">
    <a class="button button-energized" id="weak">weak</a>
    <a class="button button-energized" id="normal">normal</a>
    <a class="button button-energized" id="strong">strong</a>
</div>

JavaScript的

    .controller('AppCtrl', function($scope, $stateParams) {

        $('#weak').click(function() {
            $('#weak').addClass('active');
            $('#normal').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#normal').click(function() {
            $('#normal').addClass('active');
            $('#weak').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#strong').click(function() {
            $('#strong').addClass('active');
            $('#normal').removeClass('active');
            $('#weak').removeClass('active');
        });

   });

我有一个搜索输入字段和一个列表框,

    <input type="text"  class="inputSearch" placeholder="Search" ng-model="searchRoleOne"/>
    <i class="fa fa-search"></i>                                                         
    <select multiple class="listMutiple top5" ng-model="selectedRoleValue">
        <option ng-selected="selectrole" ng-repeat="role in roles | filter:searchRoleOne" value="{{role}}">{{role}}</option>      
    </select>

我需要addclass说

    .addClear{
        background: url(../images/Close.png) no-repeat right -10px center;
        background-repeat: no-repeat;
        background-position: right 5px center;
    }

只要有文字,我就应该在改变功能上发生.点击.addClear类搜索字段应该为空,ng模型也是如此.

我怎样才能做到这一点？

我尝试ng-class="{'addClear': searchRoleOne}"在搜索字段中使用.它工作不正常.

我写了以下代码:

 <style>
    .dotted {
         border:dotted;
     }
 </style>

....

 <p ng-style = "mystyle"  ng-class="dotted "> {{ answer }} </p>

我的目的是

元素将放在虚线边框线内.它不起作用.我查看了Angular文档(https://docs.angularjs.org/api/ng/directive/ngClass),我看到了:

如果表达式求值为字符串,则该字符串应为一个或多个以空格分隔的类名.

我知道ng-class可能包含我在-tag中定义的类名.那么......我做错了什么？