i have created ionic project with slidemenu. I also created custom reusable directive where I am getting data from rest api and assigning its value to directive for ng-repeat, it is like dropdown but it items open in modal popup. So when I select value I will filter another rest api and it data to same directive but to another instance.
In that I have input box act as filter which filter for ng-repeat items
Now issue starts in first directive filter works very good but second directive filter will not work. When I search than all items will get clear and I remove value from input box than still items will not appear .
First I thought that my directive json object is 1 level that is the reason it is working and second directive json is nested object.
So I created plunker which works like charm but it does not work on desktop or emulator.
can somebody tell me what can be the issue. I am not putting plunker as it working very good
Directive code
angular.module('plexusSelect', []).directive('plexusSelect', ['$ionicModal',
function($ionicModal) {
// Runs during compile
return {
scope: {
'items': '=',
'text': '@',
'textIcon': '@',
'headerText': '@',
'textField': '@',
'textField2': '@',
'valueField': '@',
'callback': '&'
},
require: 'ngModel',
restrict: 'E',
templateUrl: 'templates/plexusSelect.html',
link: function($scope, iElm, iAttrs, ngModel) {
if (!ngModel) return; // do nothing if no ng-model
$scope.allowEmpty = iAttrs.allowEmpty === 'false' ? false : true;
$scope.defaultText = $scope.text || '';
$ionicModal.fromTemplateUrl('plexusSelectItems.html', {
'scope': $scope
}).then(function(modal) {
$scope.modal = modal;
$scope.modal['backdropClickToClose'] = false;
});
$scope.showItems = function($event) {
$event.preventDefault();
$scope.modal.show();
}
$scope.hideItems = function() {
$scope.modal.hide();
}
/* Destroy modal */
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.viewModel = {};
$scope.clearSearch = function() {
$scope.viewModel.search = '';
}
/* Get field name and evaluate */
$scope.getItemName = function(field, item) {
return $scope.$eval(field, item);
}
$scope.validateSingle = function(item) {
$scope.text = $scope.$eval($scope.textField, item) + ($scope.textField2 !== undefined ? " (" + $scope.$eval($scope.textField2, item) + ")" : "");
$scope.value = $scope.$eval($scope.valueField, item);
$scope.hideItems();
if (typeof $scope.callback == 'function') {
$scope.callback($scope.value);
}
ngModel.$setViewValue($scope.value);
}
$scope.$watch('text', function(value) {
if ($scope.defaultText === value) $scope.placeholder = 'placeholderGray';
else $scope.placeholder = 'placeholderBlack';
});
}
};
}
])
Directive html
<ion-list>
<ion-item class="item-text-wrap item" ng-click="showItems($event)">
<a class="item-icon-left item-icon-right">
<i class="icon {{textIcon}} placeholderGray"></i>
<span class="{{placeholder}}">{{text}}</span>
<i class="icon ion-chevron-right"></i>
</a>
</ion-item>
</ion-list>
<script type="text/ng-template" id="plexusSelectItems.html">
<ion-view class="select-items modal">
<ion-header-bar class="bar-positive" has-subheader="true">
<button ng-click="hideItems()" class="button button-positive button-icon ion-ios7-arrow-back"></button>
<h1 class="title">{{headerText}}</h1>
</ion-header-bar>
<ion-header-bar class="bar-light bar-subheader bar bar-header item-input-inset">
<div class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="viewModel.search" placeholder="select city...">
<button ng-show="viewModel.search.length" ng-click="clearSearch()" class="customIcon button button-icon ion-close-circled input-button"></button>
</div>
</ion-header-bar>
<ion-content>
<div class="list">
<label ng-repeat="item in items | filter:viewModel.search" class="item item-text-wrap" ng-click='validateSingle(item)'>
{{getItemName(textField, item)}} {{textField2 !== undefined ? " (" + getItemName(textField2, item) + ")" : ""}}
</label>
</div>
</ion-content>
</ion-view>
</script>
My Controller
.controller('SearchCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get("http://xxxx/lists/getbytitle('xxx')/items?$select=City_Code,City_Name_EN&$filter=Active eq 1&$orderby=City_Name_EN asc", {
headers: {
Accept: "application/json;odata=verbose"
}
}).then(function(resp) {
$scope.deptStations = resp.data.d.results;
}, function(err) {
console.log(err);
});
$scope.deptStation = {
value: null
};
$scope.arrStation = {
value: null
};
$scope.$watch('deptStation.value', function(deptStation) {
$http.get("http://xxx/lists/getbytitle('xxx')/items?$select=Destination/City_Code,Destination/City_Name_EN&$expand=Destination/City_Code,Destination/City_Name_EN&$filter=Origin/City_Code eq '" + deptStation + "'&$orderby=Destination/City_Name_EN asc", {
headers: {
Accept: "application/json;odata=verbose"
}
}).then(function(resp) {
$scope.arrStations = resp.data.d.results;
}, function(err) {
console.log(err);
});
});
}
]);
My First Directive JSON
{"d":{"results":[{"City_Name_EN":"Abu Dhabi","City_Code":"AUH"},{"City_Name_EN":"Alexandria","City_Code":"HBE"},{"City_Name_EN":"Amman","City_Code":"AMM"},{"City_Name_EN":"Bahrain","City_Code":"BAH"},{"City_Name_EN":"Bangkok","City_Code":"BKK"}]}}
My Second Directive JSON
{"d":{"results":[{"Destination":{"City_Code":"HBE","City_Name_EN":"Alexandria"}},{"Destination":{"City_Code":"BKK","City_Name_EN":"Bangkok"}},{"Destination":{"City_Code":"MAA","City_Name_EN":"Chennai"}},{"Destination":{"City_Code":"COK","City_Name_EN":"Cochin"}}]}}