I'm having an issue with an Ionic app we are building.
On a particular screen, the app is going to list one or more names, using an ng-repeat directive in a div. The div will also feature a select element. Based on the value of the select element, I would like another sub-div to display or hide. This is what I have so far:
<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> And here is how the data retrieved from the controller:
$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) { }); What I'm trying to do is display the 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. I've tried swapping the ng-if to a ng-show and the same result occurred.
Is anyone able to assist?
