ng-класс для выбора кнопки на основе условия в ng-repeat - PullRequest
Новая
       1

ng-класс для выбора кнопки на основе условия в ng-repeat

0 голосов
/ 18 октября 2018

У меня есть код ниже, где я отображаю кнопки на основе значений массива.Я хочу выбрать кнопку на основе условия, которое проверяет, совпадает ли оно с другими значениями массива.Я добавил ng-класс, чтобы проверить, что я в цикле array1 совпадает с listApi, но не смог придумать правильную логику и заставить его работать.Нужна помощь, пожалуйста 

<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>

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

Ваш тег 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>
0 голосов
/ 18 октября 2018

Простая модификация 

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>
0 голосов
/ 18 октября 2018

Я не уверен на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...