Кнопка ng-hide, если имя совпадает во втором объекте - PullRequest
Новая
       7

Кнопка ng-hide, если имя совпадает во втором объекте

0 голосов
/ 25 апреля 2018

Привет, у меня есть два объекта, один для отображения списка в таблице 

 $scope.data=[
    {"id" : "1","name" : "item1"},
    {"id" : "2","name" : "item2"},
    {"id" : "4","name" : "item4"},
    {"id" : "7","name" : "item7"},
    {"id" : "8","name" : "item8"},
    {"id" : "9","name" : "item9"},
    ]

, где объект состоит из списка имен элементов следующим образом 

 $scope.items=[
          {id:"1",itemName:"item1"},
          {id:"2",itemName:"item5"},
        ]

В таблице яотображение данных в первом объекте вместе с кнопкой в ​​каждом tr.Теперь мне нужно скрыть кнопку в tr, если это имя элемента существует во втором объекте. 

var c = angular.module('myApp',[])
c.controller('myCtrl',function($scope){
  
  $scope.data=[
    {"id" : "1","name" : "item1"},
    {"id" : "2","name" : "item2"},
    {"id" : "4","name" : "item4"},
    {"id" : "7","name" : "item7"},
    {"id" : "8","name" : "item8"},
    {"id" : "9","name" : "item9"},
    ]  
  $scope.items=[
      {id:"1",itemName:"item1"},
      {id:"2",itemName:"item5"},
    ]
})
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>

   <table border="2">
      <tr>
        <td>Name</td>
        <td>Action</td>
      </tr>
      <tr ng-repeat="row in data">
        <td>{{row.name}}</td>
        <td>
          <button type="submit">Edit</button>
        </td>
      </tr>
    </table>


  </body>

</html>

Ответы [ 5 ]

0 голосов
/ 25 апреля 2018

Создайте новый массив и добавьте новый ключ к этому объекту, например showButton, значение которого будет истинным или ложным в зависимости от элемента, присутствующего в обоих массивах 

var c = angular.module('myApp', [])
c.controller('myCtrl', function($scope) {

  $scope.data = [{
      "id": "1",
      "name": "item1"
    },
    {
      "id": "2",
      "name": "item2"
    },
    {
      "id": "4",
      "name": "item4"
    },
    {
      "id": "7",
      "name": "item7"
    },
    {
      "id": "8",
      "name": "item8"
    },
    {
      "id": "9",
      "name": "item9"
    },
  ]
  $scope.items = [{
      id: "1",
      itemName: "item1"
    },
    {
      id: "2",
      itemName: "item5"
    },
  ]

  $scope.updatedData = $scope.data.map(function(item) {
    var findIndex = $scope.items.findIndex(function(secItem) {
      return item.id === secItem.id
    });
    if (findIndex === -1) {
      return {
        "id": item.id,
        "name": item.name,
        "showButton": true
      }

    } else {
      return {
        "id": item.id,
        "name": item.name,
        "showButton": false
      }

    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>

  <table border="2">
    <tr>
      <td>Name</td>
      <td>Action</td>
    </tr>
    <tr ng-repeat="row in updatedData">
      <td>{{row.name}}</td>
      <td>
        <button ng-if="row.showButton" type="submit">Edit</button>
      </td>
    </tr>
  </table>


</body>
0 голосов
/ 25 апреля 2018

Вы можете использовать метод find массивов JavaScript (https://www.w3schools.com/jsref/jsref_find.asp) в директиве ng-show, чтобы выполнить это: 

var c = angular.module('myApp',[])
c.controller('myCtrl',function($scope){

  $scope.containsItem = function(item){
      return item.itemName == this;
  };
  
  $scope.data=[
    {"id" : "1","name" : "item1"},
    {"id" : "2","name" : "item2"},
    {"id" : "4","name" : "item4"},
    {"id" : "7","name" : "item7"},
    {"id" : "8","name" : "item8"},
    {"id" : "9","name" : "item9"},
    ]  
  $scope.items=[
      {id:"1",itemName:"item1"},
      {id:"2",itemName:"item5"},
    ]
})
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>

   <table border="2">
      <tr>
        <td>Name</td>
        <td>Action</td>
      </tr>
      <tr ng-repeat="row in data">
        <td>{{row.name}}</td>
        <td>
          <button type="submit" ng-show="items.find(containsItem, row.name)">Edit</button>
        </td>
      </tr>
    </table>


  </body>

</html>
0 голосов
/ 25 апреля 2018

используйте что-то вроде этого в кнопке html 

<button type="submit" ng-if="checkIfExists(row.id)">Edit</button>

в функции добавления вашего контроллера 

$scope.checkIfExists = (id) => $scope.items.map(elem=>elem.id).includes(id);


var c = angular.module('myApp',[])
c.controller('myCtrl',function($scope){
  
  $scope.data=[
    {"id" : "1","name" : "item1"},
    {"id" : "2","name" : "item2"},
    {"id" : "4","name" : "item4"},
    {"id" : "7","name" : "item7"},
    {"id" : "8","name" : "item8"},
    {"id" : "9","name" : "item9"},
    ]  
  $scope.items=[
      {id:"1",itemName:"item1"},
      {id:"2",itemName:"item5"},
    ];
    
    $scope.checkIfExists = (id) => $scope.items.map(elem=>elem.id).includes(id);
})
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>

   <table border="2">
      <tr>
        <td>Name</td>
        <td>Action</td>
      </tr>
      <tr ng-repeat="row in data">
        <td>{{row.name}}</td>
        <td>
          <button type="submit" ng-if="checkIfExists(row.id)">Edit</button>
        </td>
      </tr>
    </table>


  </body>

</html>
0 голосов
/ 25 апреля 2018

Это решение можно сделать намного проще, используя вспомогательную библиотеку, такую ​​как underscore или lodash, но это должно работать: 

angular.module('myApp', []).controller('myCtrl', function($scope){
  $scope.data=[
    {"id" : "1","name" : "item1"},
    {"id" : "2","name" : "item2"},
    {"id" : "4","name" : "item4"},
    {"id" : "7","name" : "item7"},
    {"id" : "8","name" : "item8"},
    {"id" : "9","name" : "item9"},
  ];  
  $scope.items=[
      {id:"1",itemName:"item1"},
      {id:"2",itemName:"item5"},
  ];
  $scope.itemExists = function(name) {
    var exists = false;
    $scope.items.forEach(function(elem) {
      if (elem.itemName === name) {
        exists = true;
      }
    }));
    return exists;
  }
});
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>

   <table border="2">
      <tr>
        <td>Name</td>
        <td>Action</td>
      </tr>
      <tr ng-repeat="row in data">
        <td>{{row.name}}</td>
        <td>
          <button ng-hide="itemExists(row.name)" type="submit">Edit</button>
        </td>
      </tr>
    </table>


  </body>

</html>
0 голосов
/ 25 апреля 2018

Вы можете создать другой массив, подобный этому, для хранения значений itemName 

$scope.values = $scope.items.map(i => i.itemName);

И в вашем шаблоне используйте его как 

ng-hide="values.indexOf(row.name) > -1"


var c = angular.module('myApp',[])
c.controller('myCtrl',function($scope){
  
  $scope.data=[
    {"id" : "1","name" : "item1"},
    {"id" : "2","name" : "item2"},
    {"id" : "4","name" : "item4"},
    {"id" : "7","name" : "item7"},
    {"id" : "8","name" : "item8"},
    {"id" : "9","name" : "item9"},
    ]  
  $scope.items=[
      {id:"1",itemName:"item1"},
      {id:"2",itemName:"item5"},
    ];
   $scope.values = $scope.items.map(i => i.itemName);
})
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>

   <table border="2">
      <tr>
        <td>Name</td>
        <td>Action</td>
      </tr>
      <tr ng-repeat="row in data">
        <td>{{row.name}}</td>
        <td>
          <button ng-hide="values.indexOf(row.name) > -1" type="submit">Edit</button>
        </td>
      </tr>
    </table>


  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...