如果名称在第二个对象中匹配，则为ng-hide按钮

时间：2018-04-25 16:52:32

标签： javascript html angularjs

您好我有两个对象，用于在表格中显示列表

 $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中的按钮。

＆＃13;
＆＃13; 
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"},
    ]
})
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：0)

您可以创建另一个这样的数组，以保存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>

答案 1 :(得分：0)

在html按钮

中使用类似的内容 
<button type="submit" ng-if="checkIfExists(row.id)">Edit</button>

在你的constroller添加功能

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

＆＃13;
＆＃13; 
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);
})
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

使用辅助库（例如underscore或lodash）可以使此解决方案更加简单，但这应该可行：

＆＃13;
＆＃13; 
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;
  }
});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以在find指令中使用ng-show JavaScript数组方法（https://www.w3schools.com/jsref/jsref_find.asp）来完成此任务：

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>

答案 4 :(得分：0)

创建一个新数组并向此对象添加一个新键，如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 } } }); });，其值将为true或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>
{{1}}

相关问题
最新问题