Question

我有下面的代码，我在其中基于数组值显示按钮。我想根据检查条件是否与另一个数组值匹配来选择按钮。我添加了一个ng-class来检查array1循环中是否匹配listApi的i，但是无法给出正确的逻辑并使其正常工作。需要帮助

<label ng-repeat="i inn array1 track by $index">
    <label class="btn-primary" ng-click="array1Selection()">
        <span ng-class="{'btn-primary': i.name === listApi[0].name}"></span>
        {{i.name}}
    </label>
  </div>
</label>

Answer 1

我不是100％肯定JS的find将在Angular中内联工作，但事实如此……

<label ng-repeat="i inn array1 track by $index">
  <div data-toggle="buttons">
    <label class="btn btn-w-m btn-primary" ng-click="array1Selection()">
      <div class="itemcontent">
        <input type="checkbox" name="array1Select" />
        <span nng-class="btn btn-w-m btn-primary: listApi.find(a => a.name === i.name)"></span>
        {{i.name}}
      </div>
    </label>
  </div>
</label>

Answer 2

您的span标签为空，我认为您应该在其中添加{{i.name}}。同样，您不应该在标签中添加类'btn ...'。希望这段代码对您有所帮助。

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.array1 = [{
    id: 1,
    name: "abc"
  }, {
    id: 1,
    name: "xyz"
  }];

  $scope.listApi = [{
    id: 2,
    name: "xyz"
  }];

  $scope.existInList = function(itm) {
    let x = $scope.listApi.findIndex(it => {
      return it.name == itm.name
    });
    return x == -1 ? false : true;
  }

});

.exists {
  color: green
}

.noexists {
  color: red
}

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h2>Add class to existing items and others</h2>
  <label ng-repeat="i in array1">
  <div data-toggle="buttons">
    <label>
      <div class="itemcontent">
        <input type="checkbox" name="array1Select" />
        <span ng-class="{true: 'exists', false: 'noexists'}[existInList(i) === true]">
                {{i.name}}
        </span>
      </div>
    </label>
  </div>
  </label>

  <h2>Show only if exists in list</h2>
  <label ng-repeat="i in array1">
  <div data-toggle="buttons">
    <label  ng-if="existInList(i)">
      <div class="itemcontent">
        <input type="checkbox" name="array1Select" />
        <span>
                {{i.name}}
        </span>
      </div>
    </label>
  </div>
  </label>

</body>

</html>

Answer 3

一个简单的修改

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.array1 = [{ id: 1, name: "abc" }, { id: 1, name: "xyz"
  }];

  $scope.listApi = [{ id: 2, name: "xyz" }];

  $scope.foundInApiList = function(name) {
  
    for(var i = 0; i < $scope.listApi.length; i++)
      if($scope.listApi[i].name == name)
        return true;
        
    return false;
  }

});

.exists {
  color: green
}

.noexists {
  color: red
}

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  
  <label ng-repeat="i in array1 track by $index">
  <div data-toggle="buttons">
    <label class="btn btn-w-m btn-primary" ng-click="array1Selection()">
      <div class="itemcontent">
        <input type="checkbox" name="array1Select" />
        <span class="btn btn-w-m btn-primary" ng-class="{true: 'exists', false: 'noexists'}[foundInApiList(i.name)]">{{i.name}}</span>        
      </div>
    </label>
  </div>
</label>

</body>

</html>

ng-class根据ng-repeat

3 个答案: