角度/离子 ng-if答案

【问题标题】：Angular/Ionic ng-if角度/离子 ng-if
【发布时间】：2016-04-05 12:11:11
【问题描述】：

我们正在构建的 Ionic 应用程序存在问题。

在特定屏幕上，应用程序将列出一个或多个名称，在 div 中使用 ng-repeat 指令。 div 还将具有一个选择元素。根据选择元素的值，我希望显示或隐藏另一个子 div。这是我目前所拥有的：

<ion-list>
    <div class="item item-input item-select" ng-repeat="customer in data.customerList">
        <ion-checkbox class="checkbox-balanced" style="border:none;" ng-click="onCheckboxClick($event, customer.SubjectId)"></ion-checkbox>
        <div class="input-label item-text-wrap">{{customer.CustomerName}}</div>
        <select ng-model="customer.ServiceType" ng-options="o as o for o in data.serviceTypes" ng-disabled="customer.Served == false"></select>
        <div ng-if="customer.ServiceType == 'Non Personal'">
            <p>Div Stuff to Display Here</p>
        </div>
    </div>
</ion-list>

以下是从控制器检索数据的方式：

$scope.data = {};
$scope.data.customerList = {};
$scope.data.serviceTypes = ['', 'Personal', 'Non-Personal'];

$http.get(ApiEndpoint.url + '/GetJobDetails?id=' + $scope.jobId).then(function(resp) {
    for (i = 0; i < resp.data.Customers.length; i++) {
        var newCustomer =
            {
                "CustomerName": resp.data.Customers[i].CustomerName,
                "SubjectId": resp.data.Customers[i].SubjectId,
                "Served": false,
                "ServiceType": ""
            };
        $scope.data.customerList[i] = newCustomer;
    }

}, function(err) {

});

我想要做的是显示 div：

<div ng-if="customer.ServiceType == 'Non Personal'">
<p>Div Stuff to Display Here</p>
</div>

when the select value equals 'Non Personal'. Currently nothing happens when the select value changes.我尝试将 ng-if 交换为 ng-show 并且发生了相同的结果。

有人可以帮忙吗？

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

<select ng-model="customer.ServiceType" ng-options="o as o for o in data.serviceTypes" ng-disabled="customer.Served == false" value="{{o}}"></select>

您需要将值设置为{{o}}

或者，您也可以使用track by

<select ng-model="customer.ServiceType" ng-options="o as o for o in data.serviceTypes track by o" ng-disabled="customer.Served == false"></select>

【讨论】：