My problem is, I want to disable div. I ma not getting a way to do it.
<div ng-repeat="item in items">
<div ng-click="somefunction()">{{some value}}</div>
</div>
JS:
$scope.items = [1,2,3,4,5];
I want to disable all div having even value.
Divs cannot be disabled by HTML. You can do it by code:
<div ng-click="somefunction(item)">{{some value}}</div>
$scope.somefunction = function(item) {
if( item % 2 === 0 ) {
return;
}
// rest of logic as before
};
You cant disable div. but you can disable link or button like:
<div ng-repeat="item in items">
<a ng-click="somefunction()" ng-disabled="disabledEvenItems(item)">{{some value}}</a>
</div>
Or you can add style base on it:
<div ng-repeat="item in items">
<div ng-click="somefunction()" ng-class="{{'myClass': disabledEvenItems(item)}}">{{some value}}</div>
</div>
</div>
$scope.disabledEvenItems = function(item) {
return item % 2 !== 0
};
To run the function only for odd values you can use $even / $odd helper properties ngRepeat offers:
<div ng-repeat="item in items">
<div ng-click="$even && somefunction()">{{some value}}</div>
</div>
UPD.
Angular way of doing what you are after is to use expression like this:
<div ng-click="item % 2 && somefunction()">{{some value}}</div>
Try this :
remove onclick from div as shown below
<div ng-repeat="item in items" class="divList">
<div>{{some value}}</div>
</div>
use .filter() to find div with even values and detach click handler
$(function(){
$('.divList div').click(somefunction());
$('.divList div').filter(function(){
var value = parseInt($(this).text()) || 0;
return (value % 2 ==0);
}).off('click');
});
Use display:none
<div id="someId" style="display: none;">
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document, it doesn't take up any space.
Related
I have some angular code that is supposed to assign a class to only the parent element of the link clicked. This seems to work initially, but then after clicking around a bit, the code seems to get stuck. Here is some sample code of what I'm working with:
<div ng-repeat="item in items track by item.id" class="row" ng-class="{'active': selectItem.this == item.id}">
<a ng-click="selectItem.this = item.id">Move to top</a> {{item.name}}
$scope.selectItem = { this: -1 };
http://plnkr.co/edit/jhahff7OyVTVt615BBp3?p=preview
Any help would be great!
You just need to make the whole text a clickable DOM
<div ng-repeat="item in items track by item.id" class="row" ng-class="{'active': selectItem.this == item.id}">
<a ng-click="selectItem.this = item.id">Move to top <span ng-bind="item.name"></span></a>
</div>
I replaced the a tag with p tag and bind an click event to the p tag. With this refactoring, I don't see any lagging or weird behaviour.
<body ng-controller="MainCtrl">
<div ng-repeat="item in items track by item.id" class="row"
ng-class="{'active': selectItem.this == item.id}">
<p style="cursor: pointer;" ng-click=selectedItem()>
Move to top {{item.name}}
</p>
</div>
</body>
In controller
$scope.selectItem = {};
$scope.selectedItem = function () {
$scope.selectItem.this = this.item.id;
};
Let me know if you still see any issues.
I am displaying the ng-repeat content in two columns.
Using this code works fine:
<div class=storerow ng-repeat="store in stores track by $index" ng-if="$index%2==0">
<div ng-repeat="i in [$index,$index+1]" ng-if="stores[i]!=null" class="ngrepeatstore">
<div class="image-container" style="background-image: url({{stores[i].image}})" ng-click="tileClicked({{stores[i].id}})">
</div>
</div>
However, when I add a filter- it breaks the NG repeat and no content appears:
<div class=storerow ng-repeat="store in stores track by $index" ng-if="$index%2==0">
<div ng-repeat="i in [$index,$index+1] | filter: greaterThan('order', 0) | orderBy:'order'" ng-if="stores[i]!=null" class="ngrepeatstore">
<div class="image-container" style="background-image: url({{stores[i].image}})" ng-click="tileClicked({{stores[i].id}})">
</div>
</div>
the .js for greaterThan
$scope.greaterThan = function(prop, val){
return function(item){
return item[prop] > val;
}}
I tried adding the filter to the first ng-repeat- however that doesn't work as it just applies the filter to the overall content (ie if just one item is greatThan 0, it shows all items- not just the ones greater than 0).
This is because you're actually telling Angular to filter the property order on [$index, $index + 1], an array of two integers, which makes no sense.
I.E. With your delegate comparing index.prop > val, what you're really doing is comparing index['order'] > someValue.
This Plunker demonstrates: http://plnkr.co/edit/FkSrmZuuK4B1ToGNgAnq?p=preview You need to move filter:greaterThan(prop, val) up to the parent ng-repeat. Only there will your filter work.
<div ng-repeat="store in stores | filter:greaterThan2('id', 0) | orderBy:'name'" ng-if="$even">
{{store.name}}
<div ng-repeat="i in [$index, $index+1] | orderBy:angular.identity:true" ng-if="stores[i] !== null">
<strong>store.id</strong> {{i}}
</div>
</div>
I have a dinamically builded list of tests:
<script id="TestsTemplate" type="text/ng-template">
<article class="tests-main">
<section class="tests">
<div class="test" ng-repeat="test in tests">
<p>Question {{ test.number }}:</p>
<div ng-repeat="answer in test.answers">
<div ng-repeat="(key, value) in answer">
<p><button ng-click="processAnswer(value, $event)" class="btn" >○ {{ key }}</button></p>
</div>
</div>
</div>
</article>
</script>
and I want to add a class to the div(class="test") in which button was pressed.
I am familiar only with the jQuery and I can think of only this approach:
$scope.processAnswer = function(isRight, event) {
isRight ? $scope.count++ : $scope.count--;
event.target.parentNode.parentNode.parentNode.addClass('hide');
}
How to do it in Angular style ?
EDIT:
My solution:
Use ng-class and $index:
<div ng-class="($index==selectedIndex) ? 'hide' : 'test'" ng-repeat="test in tests">
controller:
$scope.selectedIndex = -1;
$scope.processAnswer = function(isRight, index) {
isRight ? $scope.count++ : $scope.count--;
$scope.selectedIndex = index - 1; //$index starts at 0;
}
where index is test.number
Try like this
angular.element(event.target).parent().parent().addClass("hide");
Manipulating dom in html is not recommended . You should do your dom manipulation only in directives.
You could maybe use ng-class to apply the class when you set a boolean to true. For example :
<div class="test" ng-repeat="test in tests" ng-class="{'hide' : onProcessAnswer}">
and in your controller
$scope.onProcessAnswer = false;
$scope.processAnswer = function(isRight, event) {
...
$scope.onProcessAnswer = true;
...
}
In my opinion, Angular is a library to make coders do less dom option.
You can use data-bind feature to achieve most request mostly.
If you do want to get a parent element and add an attribute, just use jQuery or pure javascript.
Try as simple
$element.parent().addClass('default-class');
I have a ng-repeat which display a list of divs and when I click on one it shows an aditionnal div for the clicked item.
This is working
<div ng-repeat="item in items">
<div ng-click="showfull = !showfull">
<div>
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
<div ng-show="showfull">
<p>{{item.info}}</p>
</div>
<hr/>
</div>
My items are loaded from a json containing a list of item and each item have a default attribut showfull set to false in this json. This is working, but now I want to hide all others item in the list when an item is clicked. I've tryied something like this :
This is not working
<div ng-repeat="item in items">
<div ng-click="expand(item)">
<div>
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
<div ng-show="showfull">
<p>{{item.info}}</p>
</div>
<hr/>
</div>
and in the controller I've added a function :
$scope.expand = function(e) {
e.showfull = !e.showfull;
//TODO: put here a foreach logic to hide all other items
}
But even without the foreach logic this is not working, the item don't show the additionnal div when clicked. I have two question :
I suppose this is due to item being "passed by copy" in the expand function or some kind of scope isolation issue but can you explain me why in detail ?
SOLVED
How can I hide all the additional div of other items when I click an item and show the additionnal content for this item ? Do I need to do a directive ?
NOT SOLVED
Thanks
I think you're on the right track. You need to set the showfull on the item and then use ng-show or ng-if to hide it, or as Gavin mentioned, use a class.
On ng-click you can call your expand function, where you pass the item, toggle it and set all others to hidden.
Template:
<div ng-repeat="item in items>
<div ng-click="expand(item)">
<div>
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
<div ng-show="item.showfull">
<p>{{item.info}}</p>
</div>
<hr/>
</div>
Controller:
$scope.expand = function (item) {
angular.forEach($scope.items, function (currentItem) {
currentItem.showfull = currentItem === item && !currentItem.showfull;
});
};
Your expand method is modifying the item, so your ng-show needs to reference the item:
<div ng-show="item.showfull">
<p>{{item.info}}</p>
</div>
To hide all of your items you need to do something like
$scope.expand = function(item) {
angular.forEach(items, function(i) {
if (i === item) {
i.showfull = !i.showfull;
} else {
i.showfull = false;
}
});
};
Shouldn't the second div you want to show be referencing the item?
<div ng-repeat="item in items>
<div ng-click="expand(item)">
<div>
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
<!-- Added item to ng-show -->
<div ng-show="item.showfull">
<p>{{item.info}}</p>
</div>
<hr/>
</div>
My angular is 1.0.8-stable
My objective is to display data in rows of 3.
My html should look like
<div class="table-row">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
My pseudo code is if the $index mod 3 == 0 then I will display <div class="table-row">.
if the $index mod 3 == 2, then I will display </div>.
So far, I have this.
<div ng-repeat='item in my_works.items'>
<!-- if index mod 3 == 0 show <div>-->
<!-- if index mod 3 == 2 show </div>-->
</div>
Perhaps I was thinking it in the wrong way as there may be a more efficient way to do this in angularjs?
You can use (key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.
You can try something like this
<div ng-repeat='(index, item) in my_works.items'>
<div class="table-row" ng-show="index % 3 == 0">
</div>
</div>
Reference
Since you can't use ng-if in 1.0.8 here are two variations that solve the problem. They both wrap 3 items into a table-row div
The outer loop counts off in groups of three, so it fires once per outer table-row div. The second approach uses a filter to control the loop range but it should have better performance. The first approach doesn't require a new filter.
Then the inner ng-repeat loops through the 3 items within a row. It uses slice to get just the 3 array items needed for that particular row.
Here's a fiddle with both of the variations working: http://jsfiddle.net/f8D8q/4/
Option 1: Solution without a new filter:
<div ng-repeat='itemtmp in items|limitTo:(items.length/3)+1'>
<div class="table-row">
<span ng-repeat='item in items.slice($index*3,($index*3+3))'>
{{item.name}} - {{$index}}
</span>
</div>
</div>
Option 2: More performant solution using range filter from http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops
<div ng-repeat="n in [] | range:(items.length/3)+1">
<div class="table-row">
<span ng-repeat='item in items.slice($index*3,($index*3+3))'>
{{item.name}} - {{$index}}
</span>
</div>
</div>
and the associated range filter:
app.filter('range', function () {
return function (input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
};
});
Both are tested (down to 1.0.2) and work.
Convert your flat list of items to a list of lists of 3 items.
Iterate over the list of lists.
<div class="table-row" ng-repeat="list in listOfLists">
<div class="item" ng-repeat="item in list">
{{ item }}
</div>
</div>
If you already have a list, items, you could add a filter chunked and replace listOfLists with items|chunked:3, assuming you implement chunked something like this:
app.filter('chunked', function(){
return function(list, chunkSize){
var chunks = [];
angular.forEach(list, function(element, i){
if(i % chunkSize === 0){
currentChunk = [];
chunks.push(currentChunk);
}
currentChunk.push(element);
});
return chunks;
};
});
I think that matches what you are trying to do; here's a plunker: http://plnkr.co/edit/3h7JprbXFVwnNZErj7hl
I didn't get a chance to test with old Angular though.