我需要显示包含类"描述"的div。只有"测试"属性存在于数组中。 ng-show指令在其他行中工作正常,只有带描述的div不会选择条件并显示所有行的div。
HTML:
<div class="callPlans" >
<div class="planDetails noPlans" ng-show="!x.callPlanArr.length"><span>No call plans found.</span></div>
<div class="planDetails" ng-repeat="data in x.callPlanArr">
<div class="upfront">
<ul>
<li ng-show="data.upfront != ''"><p>£{{data.upfront}}</p>up front</li>
<li><h2>£{{data.plan.rental}}/mth</h2></li>
</ul>
</div>
<div class="description" ng-show="data.test != ''">
<p>Test</p>
</div>
</div>
</div>
控制台中的数组:
: {…}
"$$hashKey": "object:23"
STDAmount: "8.5"
STDDuration: "3"
euEligible: ""
handsetClass: "hc38"
offer_type: "REC"
plan: Object { text_allowance: "Unlimited", contract: 24, bb_discount: "5", … }
presales_name: "BT Mobile 6GB (ULM)(ULT)(25) VA Phone Plan MRC DISC - REC"
presales_sequence: 299
promo_type: "NPF"
recommended: ""
rental_discount_amount: ""
rental_discount_duration: ""
risk: "750"
s_code: "S0375102"
test: "S0375102"
un_s_code: "S0375095"
upfront: "20"
注意:并非所有行都具有test属性。所以我只有在它出现时才需要启用div。
任何帮助将不胜感激。
答案 0 :(得分:0)
通过使用以下行检查元素是否为该属性返回undefined
来执行此操作。
<div class="description" ng-show="data.test">
<p>Test</p>
</div>
以下是一个工作示例!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
this.callPlanArr = [{STDAmount: "8.5",
STDDuration: "3",
euEligible: "",
handsetClass: "hc38",
offer_type: "REC",
plan: { text_allowance: "Unlimited", contract: 24, bb_discount: "5" },
presales_name: "BT Mobile 6GB (ULM)(ULT)(25) VA Phone Plan MRC DISC - REC",
presales_sequence: 299,
promo_type: "NPF",
recommended: "",
rental_discount_amount: "",
rental_discount_duration: "",
risk: "750",
s_code: "S0375102",
test: "S0375102",
un_s_code: "S0375095",
upfront: "20"},{STDAmount: "8.5",
STDDuration: "3",
euEligible: "",
handsetClass: "hc38",
offer_type: "REC",
plan: { text_allowance: "Unlimited", contract: 24, bb_discount: "5"},
presales_name: "BT Mobile 6GB (ULM)(ULT)(25) VA Phone Plan MRC DISC - REC",
presales_sequence: 299,
promo_type: "NPF",
recommended: "",
rental_discount_amount: "",
rental_discount_duration: "",
risk: "750",
s_code: "S0375102",
un_s_code: "S0375095",
upfront: "20"}
];
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController as x' ng-app="myApp">
<div class="callPlans">
<div class="planDetails noPlans" ng-show="!x.callPlanArr.length"><span>No call plans found.</span></div>
<div class="planDetails" ng-repeat="data in x.callPlanArr">
<div class="upfront">
<ul>
<li ng-show="data.upfront != ''">
<p>£{{data.upfront}}</p>up front</li>
<li>
<h2>£{{data.plan.rental}}/mth</h2></li>
</ul>
</div>
<div class="description" ng-show="data.test">
<p>Test</p>
</div>
</div>
</div>
</div>
&#13;