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"
  }
}];

如果标志为false，则相应的行不会突出显示，只会填充perAddress。
如果该标志为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>

angularJs ng -repeat json对象

3 个答案: