Question

我正在构建一个Ionic应用程序的问题。

在特定屏幕上，应用程序将使用div中的ng-repeat指令列出一个或多个名称。 div还将包含一个select元素。根据select元素的值，我希望显示或隐藏另一个子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>

当选择值等于“非个人”时。当前选择值更改时没有任何反应。我尝试将ng-if交换到ng-show并且发生了相同的结果。

有人能够提供帮助吗？

Answer 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>

Angular / Ionic ng-if

1 个答案: