Question

这是我的代码

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.masterData=[
{id:1,Name:"name1"},
{id:2,Name:"name2"},
{id:3,Name:"name3"},
{id:4,Name:"name4"},
{id:5,Name:"name5"},
{id:6,Name:"name6"},
{id:7,Name:"name7"},
{id:8,Name:"name8"},
{id:9,Name:"name9"}
]

  	
$scope.columnData = {
    key1 : {
        id : 1,
        name : 'name1'
    },
    key2 : {
        id : 2,
        name : 'name2'
    },
    
    key3 : {
        id : 11,
        name : 'name3'
    }
};
  
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">

<table>
    <tr ng-repeat="(key,value) in columnData">
      
    
      <td ng-if="masterData.id.indexOf(value.id)==-1">
    
        <a href="#" class="btn btn-primary btn-dark" > {{value.name}} </a>
      </td>
      <td ng-if="masterData.id.indexOf(value.id)!=-1">
    
        <a href="#" class="btn btn-primary btn-dark" ng-disabled="true"> {{value.name}} </a>
      </td>
      
      
    </tr>
  </table>


</body>

</html>

在上面的代码中我有一个数组包含多个对象，我有一个字典。我编写的代码用于检查字典对象是否存在于数组中或不使用ng-if但它无法正常工作。我想禁用数组中存在的字典ID是什么，仅在html视图中使用angularjs禁用。这是我的傻瓜。

https://plnkr.co/edit/jEAVSNeGVZgyoBCbKm2b?p=preview

Answer 1

您可以像这样添加一个功能到您的范围

$scope.isInMasterData = function(id) {
  return $scope.masterData.map(function(obj) { return obj.id }).indexOf(id) !== -1;
};

在你的HTML中，你可以这样称呼它

<td ng-if="!isInMasterData(value.id)">
  <a href="#" class="btn btn-primary btn-dark" > {{value.name}} </a>
</td>
<td ng-if="isInMasterData(value.id)">
  <a href="#" class="btn btn-primary btn-dark" ng-disabled="true"> {{value.name}} </a>
</td>

Plunker

Answer 2

如果禁用链接，您可以创建一个空的href

HTML code：

<tr ng-repeat="(key,value) in columnData">
  <td>
    <a ng-href="{{!isInMasterData(value.id) ? '' : '#'}}" class="btn btn-primary btn-dark"> {{value.name}} </a>
  </td>
</tr>

添加其他评论中所写的功能：

$scope.isInMasterData = function(id) {
return $scope.masterData.filter(function(obj) {
  return obj.id == id;
 });
};

js函数的另一种替代方法是：

$scope.searchInMasterData = function(id) {
return $scope.masterData.filter(function(obj) {
  return obj.id == id;
 });
};

在这种情况下，HTML代码应为：

<a ng-href="{{searchInMasterData(value.id).length == 0 ? '' : '#'}}" class="btn btn-primary btn-dark"> {{value.name}} </a>

codepen

如何在ng-repeat中为对象数组条件实现ng-if？

2 个答案: