I have a ionic list which shows the checked items from another list, but I want to show a message if the list is empty.
The code is:
<ion-item ng-repeat='(place, checked) in localStorage.options' ng-if="checked" class="item item-body">
How would I do the ng-show, as this is not the standard ng-repeat.
try this :
Controller:
$scope.isEmptyObjectEmpty = function(object) {
for(var i in object) {
return true;
}
return false;
};
Html:
<div class="item item-text-wrap"
ng-if="!isEmptyObjectEmpty(localStorage.options)">
list is empty(msg)
</div>
Related
So here's my workflow-
I've got an HTML file in which a div tag is created on which I've placed ng-repeat which iterates and gives me a list of items. On this div tag, I've placed an ng-click function. On clicking and item in the div tag, a modal-popup is opened.
What I need is to pass the id of the item from ng-repeat and show the data of this id in the modal-popup.
Now I've written the code upto here and all things are working fine, but the issue that I'm facing is if I click on any of the items from ng-repeat the first item is only returned, and hence data for the id of the first item is only being displayed in the modal-popup.
How could I get the id of the particular item clicked (and not the first item) and pass it to the controller?
Here's my working code -
main HTML:
<div id="main">
<div ng-repeat="data in JsonData" ng-click="openModal()">
<div id="widget">
<div id="{{$index}}">
<div>
<h2 class="font-bold no-margins" id="{{data.itemName}}">
{{data.itemName}}
</h2>
</div>
<div>
// other code
</div>
</div>
</div>
</div>
</div>
main controller.js:
$scope.openModal = function () {
$rootScope.elementid = document.getElementById('main').getElementsByTagName('div')[2];
$rootScope.variableId = $scope.elementid.id; // This gives the value in {{$index}}
$rootScope.elementname = document.getElementById('main').getElementsByTagName('h2')[0];
$rootScope.variablename = $scope.elementname.id; // This gives the value in {{data.itemName}}
$uibModal.open({
templateUrl: 'url/to/modal/popup.html',
controller: 'PopUpController',
scope : $scope,
windowClass: "animated fadeIn",
backdrop:'static'
});
};
On doing inspect element, I found that the elements are getting their correct id.
This is for the {{itenName}} code: (names are coming correct)
h2#CorrectName.ng-binding
and this is for the {{$index}} code: (here, id is incrementing for the items of ng-repeat)
div#0.ng-binding
So where am I wrong here? Is it due to any asynchronous call? Or is it due to ng-binding (i.e id of the item is returned before the ng-binding function completes)?
I'm really stuck here for a couple of days now. Any help would be much appreciated. Thanks.
You should not get the HTML data, instead you should pass the values to your function
ng-click="openModal(data)"
and from that on you can get the data in your funtion
$scope.openModal = function (data) {
and now you can do with that data whatever you want
console.log(data.itemName)
angular.module('test', []).controller('test', function($scope) {
// Test data
$scope.JsonData = [{itemName: "Test"}, {itemName: "OtherTest"}];
$scope.openModal = function(data) {
// handling data
console.log(data);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<div ng-repeat="data in JsonData" ng-click="openModal(data)">
<div id="widget">
<div id="{{$index}}">
<div>
<h2 class="font-bold no-margins" id="{{data.itemName}}">
{{data.itemName}}
</h2>
</div>
</div>
</div>
</div>
</div>
you can pass your $index to ng-click="openModal()" , so it will be ng-click="openModal($index)" .
controller
$scope.openModal = function (id) {
console.log(id); // log the clicked id
}
you can pass selected JsonData object as parametr of openModal function
<div ng-repeat="data in JsonData" ng-click="openModal(data)">
also you can pass selected obj to modal controller
$scope.openModal = function (selectedObj) {
$uibModal.open({
templateUrl: 'url/to/modal/popup.html',
controller: 'PopUpController',
scope : $scope,
windowClass: "animated fadeIn",
backdrop:'static',
resolve : {
selected: function () {
return selectedObj;
}
}
});
};
and get selected obj in PopUpController
app.contoller('PopUpController',['selected', function(selected){
console.log(selected)
}])
I have a list that shows some items, here is the code that generates my list in my controller:
$scope.multipleOptions = [{ item: '1', checkmark:false}, { item: '2', checkmark:false},{ item: '3', checkmark:false} ];
Then in my HTML I have
<ion-list id="multiple-select-list" class=" ">
<ion-item class=" " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected($index)">
<p><b>{{multipleOption.item}}</b></p>
<p class="button-icon ion-checkmark" ng-show="{{multipleOption.checkmark}}"></p>
</ion-item>
</ion-list>
As you can see when the list loads the checkmarks for all the items are hidden, and I have a function called checkSelected($index) that is called when an item is tapped, in that function I want to set the checkmark to be shown, here is what I currently have
$scope.checkSelected = function(modalIndex) {
//this set the checkmark property to true
$scope.multipleOptions[modalIndex].checkmark = true;
//the line below does not work
document.getElementById("multipl-select-list").getElementsByTagName("ion-item")[modalIndex].getElementsByTagName("p")[1].show = true;
}
In the above method I am able to set the checkmark variable of the item to ture but what I am having troubel with is making it show right when the item is tapped? How can I set the ng-show of the checkmark so it shows right when it is tapped?
EDIT
Solutions both worked I just wanted to add some behabiour I noticed, when I had ng-show={{multipleOption.checkmark}} the ng-hide class would be added to the class of that <p> so even when I set ng-show to true it would still not be shown
Thanks for all the help
HTML :
<ion-list id="multiple-select-list" class=" ">
<ion-item class=" " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected(multipleOption)">
<p><b>{{multipleOption.item}}</b></p>
<p class="button-icon ion-checkmark" ng-show="multipleOption.checkmark"></p>
</ion-item>
</ion-list>
In javascript function :
$scope.checkSelected = function(data) {
data.checkmark = true;
}
I think the problem is with your syntax. Try removing curly brackets. Also take a look a this answer
ng-show="multipleOption.checkmark"
I have an Ionic application(it work the same like Angularjs) and I have a little problem.
<ion-list class="list-inset subcategory" ng-repeat="item in shops">
<ion-checkbox class="item item-divider item-checkbox-right" ng-model="selectAll">
{{item}}
</ion-checkbox>
<ion-item ng-repeat="value in data | filter:{shopName: item}" class="item-thumbnail-left" ng-click="openProduct(value)">
...
<div class="row">
<ion-checkbox stop-event='click' ng-model="value.selected" ng-checked="selectAll">{{value.name}}</ion-checkbox>
</div>
...
</ion-list>
When I click on item with ng-model="selectAll" all items is selected. But I have property value.selected. It sets false for each one value. When I click on item with ng-model="value.selected" it changes. But when I want selec all and click on item with ng-model="selectAll" this propety doesn't change.
Help me please.
Note: I have ng-repeat in the ng-repeat. First ng-repeat is for shops, the second is for products. And I have a filter by shopName. And I want select all by shops. Now it works how I want, but doesn't change property value.selected. Value it is produt, item it is shop.
the state of selectAll can be derived from the state of your other check boxes so it should not be stored as a seperate field.
You could use a getterSetter on the selectAll model to determine weather it should be checked. e.g.
<input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>
JS
var getAllSelected = function () {
var selectedItems = $scope.Items.filter(function (item) {
return item.Selected;
});
return selectedItems.length === $scope.Items.length;
}
var setAllSelected = function (value) {
angular.forEach($scope.Items, function (item) {
item.Selected = value;
});
}
$scope.selectAll = function (value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
http://jsfiddle.net/2jm6x4co/
you can use ngClick on the item with ng-model="selectAll". you can call a function in ng-click and then make selected=true for all other items where ng-model="value.selected".
Im trying to bind value of radio button from ionic controller. The following is the code i have used for.
<div class="list">
<ion-radio ng-model="SearchChoice" ng-value="All" ng-click="SearchByFilter('All')"> ALL <div id="badge-all" class="count-jkt"> <span ng-bind="AllCount.OnGoing"></span></div></ion-radio>
<ion-radio ng-model="SearchChoice" ng-value="New" ng-click="SearchByFilter('New')"> NEW <div id="badge-new" class="count-jkt">{{AllCount.New}}</div></ion-radio>
</div>
and my controller is,
.controller('MainCtrl', function($scope) {
$scope.SearchChoice = "All";
$scope.SearchByFilter = function(item) {
console.log( "Filter:", item);
};
});
Here the value is not binding properly. Kindly help me guys!
Could you try it using the . notation ?
<div class="list">
<ion-radio ng-model="model.SearchChoice" ng-value="All" ng-click="SearchByFilter('All')"> ALL <div id="badge-all" class="count-jkt"> <span ng-bind="AllCount.OnGoing"></span></div></ion-radio>
<ion-radio ng-model="model.SearchChoice" ng-value="New" ng-click="SearchByFilter('New')"> NEW <div id="badge-new" class="count-jkt">{{AllCount.New}}</div></ion-radio>
</div>
.controller('MainCtrl', function($scope) {
$scope.model = {
SearchChoice: "All"
};
$scope.SearchByFilter = function(item) {
console.log( "Filter:", item);
};
});
For more info about the . notation see here.
I have generated a list with ng-repeat, where each item has a count variable. In each list item I have a link.
I want to increment the count when I click the link.
I tried the following way but it not work.
My Controller :-
myApp.controller('allpost', function ($scope, $http, $stateParams, Allposts) {
var id = $stateParams.id;
Allposts.GetAllposts(id).then(
function (response) {
$scope.allPosts = response.data.posts;
});
function ctrl($scope) {
$scope.increment = function(item){
item.count += 1;
}
}
})
and view like :-
<ion-content class="padding" lazy-scroll>
<div class="row no-padding HomeRowsList">
<div class="item itemfull" ng-repeat="post in allPosts">
<div class="item item-body">
<div>
<div class="title-news">
<div class="title" ng-bind-html="post.content"></div>
<div class="countbg">عدد المرات : {{post.custom_fields.azkarno}}</div>
<span>{{post.count}}</span><a onclick="ctrl(post);">Increment</a>
</div>
</div>
</div>
</div>
</div>
</ion-content>
In controller use
$scope.increment = function(item){
item.count += 1;
};
instead of
function ctrl($scope) {
$scope.increment = function(item){
item.count += 1;
}
}
and in html use
<span>{{post.count}}</span><a data-ng-click="increment(post)">Increment</a>
instead of
<span>{{post.count}}</span><a onclick="ctrl(post);">Increment</a>
It should be ng-click instead of onclick & the method name should be increment instead of ctrl.
Also remove unnecessary ctrl function wrapper from the increment method which is not needed at all, because whatever you wanted to call from the html should be included in the $scope of controller.
Markup
<span>{{post.count}}</span><a ng-click="increment(post);">Increment</a>