[英]angularJs ng -Repeat over an array of json object
这是我需要解析的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?
尝试这个
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>
创建一个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>
我可以通过两种方式告诉您。 也不需要使用标志。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.