Question

我需要显示包含类＆＃34;描述＆＃34;的div。只有＆＃34;测试＆＃34;属性存在于数组中。 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>&pound;{{data.upfront}}</p>up front</li>
                <li><h2>&pound;{{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。

任何帮助将不胜感激。

Answer 1

通过使用以下行检查元素是否为该属性返回undefined来执行此操作。

<div class="description" ng-show="data.test">
        <p>Test</p>
</div>

以下是一个工作示例！

＆＃13;

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>&pound;{{data.upfront}}</p>up front</li>
          <li>
            <h2>&pound;{{data.plan.rental}}/mth</h2></li>
        </ul>
      </div>

      <div class="description" ng-show="data.test">
        <p>Test</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

仅当数组中存在属性时才显示div

1 个答案: