angularJs ng-在json對象數組上重復

Question

這是我需要解析的json格式：

[{
  "perAddress": {
    "city": "Delhi",
    "Street": "saket",
    "pin": "101011"
  },
  "flag": false
}, {
  "perAddress": {
    "city": "Delhi",
    "Street": "malvya",
    "pin": "101011"
  },
  "flag": true,
  "alterAddress": {
    "city": "bangalore",
    "street": "velondore",
    "pin": "560103"
  }
}];

1. 如果該標志為false，則將不突出顯示相應的行，僅填充perAddress 。

2. 如果該標記為true，則對應的行將突出顯示，其中包含perAddress並且在該行上單擊時，需要填充alterAddress 。 如何遍歷json？

Answer 1

嘗試這個

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.data = [{ "perAddress": { "city": "Delhi", "Street": "saket", "pin": "101011" }, "flag": false }, { "perAddress": { "city": "Delhi", "Street": "malvya", "pin": "101011" }, "flag": true, "alterAddress": { "city": "bangalore", "street": "velondore", "pin": "560103" } }]; }); 

 .Highlight { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="d in data" ng-init="" ng-click="d.flag = !d.flag" ng-class="{'Highlight' : d.alterAddress}"> <li>{{d.perAddress}} <div ng-if="d.alterAddress"> <div ng-if="!d.flag">{{d.alterAddress}}</div> </div> </li> </div> </div> 

Answer 2

創建一個CSS類“ Highlight”並使用以下代碼-

<ul>
  <li ng-repeat="i in jsonArray" ng-class="{'Highlight' : i.flag}">
    <span>{{i.perAddress.city}} | {{i.perAddress.Street}} | {{i.perAddress.pin}}</span>
  </li>
</ul>

Answer 3

我可以通過兩種方式告訴您。 也不需要使用標志。

.highlight {
  background-color: gray;
}

使用標志解決方案如下：

 <div>
   <div ng-repeat="address in addresses" ng-class="{'highlight' : address.flag}">
    <a ng-if="!showAlterAddress" ng-click="showAlterAddress = !showAlterAddress">{{address.perAddress}}</a>
    <span ng-if="showAlterAddress">{{address.alterAddress}}</span>
   </div>
 </div>

不使用標志的解決方案如下：

 <div>
   <div ng-repeat="address in addresses" ng-class="{'highlight' : address.alterAddress}">
    <a ng-if="!showAlterAddress" ng-click="showAlterAddress = !showAlterAddress">{{address.perAddress}}</a>
    <span ng-if="showAlterAddress">{{address.alterAddress}}</span>
   </div>
 </div>