如何删除 angular js ng-repeat 中键的重复值？

Question

我正在对数组 json 值使用 ng-repeat。但我想从 UI(HTML) 中删除重复值。就像 Car 值是重复的，所以我想删除重复的键值。应该来一次。

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        }
      }
    }
  }
];
 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in res.fsus track by $index">
  <span class="step">    {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}}
  </span> 
</li>
</body>

Answer 1

您可以使用 lodash _.uniqWith 和 _.isEqual 从对象集合中删除相同的对象。详细了解 lodash uniqWith。

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
  $scope.res ={};
  fake = ['var', 'car', 'car', 'ban', 'car']
  $scope.res.fsus = fake.map( val => {
    return {
      "statusMessageType": {
        "MasterConsignment": {
          "ReportedStatus": {
            "ReasonCode": val
          }
        }
      }
    };
  })
  $scope.res.fsus = _.uniqWith($scope.res.fsus, _.isEqual);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
  <li ng-repeat="test in res.fsus track by $index">
    <span class="step">
      {{ test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode }}
    </span> 
  </li>
</body>

注意：也许@Sajeetharan 使用本机代码而不是外部库代码是正确的，但是如果您已经在项目的其余部分（像我一样）使用 lodash，您这个也应该坚持使用 lodash。

Answer 2

您不必使用任何外部库，只需使用 angular.forEach 删除重复的元素，

angular.forEach($scope.res.fsus,function(key,value){
  if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){    $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode);
  };
});

演示

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        }
      }
    }
  }
];

$scope.opts = [];
angular.forEach($scope.res.fsus,function(key,value){
  if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){    $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode);
  };
});
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in opts">
  <span class="step">    {{test}}
  </span> 
</li>
</body>

如何删除 angular js ng-repeat 中键的重复值？

How to remove duplicate value of key in angular js ng-repeat?

javascript

angularjs

angularjs-ng-repeat