Develop Reference

How activate ng-class only on one element?

I have ng-repeat and ng-class for each element. I use it for selecting elements (add border for selected).
<div class="main-block_channel_create">
<section class="parent_messageList cancelDelete">
<div id="section_animate" class="messagesList_block cancelDelete" infinite-scroll='messagelist.nextSet()' infinite-scroll-listen-for-event='anEvent' infinite-scroll-distance='100'>
<!-- User Images List -->
<a href="" class="messageBl message_preview animated" ng-repeat='preview in messagelist.previewList'>
<div class="image_container_preview" ng-class="{community_select: item.isSelected}" ng-click='communitySelect(preview)' attr="{{preview.preview_id}}">
<img class="deleteMessageBtn" src="images/close_icon.svg" ng-click="deleteMessage(preview.message_id)">
<div class="spinner_container">
<!--<img src="/images/logo-80.svg" class='spinner_img'>-->
<img class="spinner_logo_vertical" src="images/logo_vertical-part.svg" alt="">
<img class="spinner_logo_left" src="images/logo_left-part.svg" alt="">
<img class="spinner_logo_right" src="images/logo_right-part.svg" alt="">
</div>
<img class="message_preview-image" src="{{preview.image}}" alt="">
<!-- Tсли нет изображения — показываем текст -->
<div class="message_preview-text MediumNormalJunior" ng-if="!preview.image">
<div class="message_preview-text-inner" ng-if='preview.name'>
{{preview.name}}
</div>
<!-- если нету и текста показываем empty-->
</div>
<div class="empty_message" ng-if='!preview.text && !preview.image'>
<!--<h4>Empty</h4> -->
</div>
</div>
<div class="stats" ng-show='preview.total_score > 0'>
<p>{{preview.total_score}}</p>
</div>
</a>
<footer class="listFooter">
</footer>
</div>
</section>
sass
.community_select
border: 3px solid white
directive
(function(){
'use strict';
angular
.module('buzz')
.directive('channelcreate', channelcreate);
function channelcreate($rootScope, $location, $timeout, $cookies, $window, communityApiService, getCommunities){
return{
restrict: "E",
replace: true,
scope: true,
templateUrl: '/templates/channelCreate/channelCreate.html',
link: function($scope){
// $rootScope.showChannelCreate = null;
// Select communities for create new channel
$scope.communityList = [];
$scope.communitySelect = function(communityId){
$scope.selected = false;
if ($scope.communityList.indexOf(communityId) == -1){
$scope.communityList.push(communityId);
} else {
$scope.communityList.pop(communityId)
}
console.log($scope.communityList);
};
// all messages preview are loaded from messagesLoadFactory
$scope.messagelist = new getCommunities();
}
};
};
})();
I can identify each div by id when it is clicked. How can I change only one element, but not all of them?

Following your login... an option can be to check if the element's id is in the list of selected elements with communityList.indexOf(preview.id) != -1 so your ng-class would look like:
ng-class="{community_select: communityList.indexOf(preview.id) != -1}"
Edit
Also, when deleting an id from the $scope.communityList make sure you first find its index and then remove it with splice.
Now the portion for removing/adding the id would look like this:
// ... content omitted
$scope.communitySelect = function(communityId) {
$scope.selected = false;
var index = $scope.communityList.indexOf(communityId);
if (index == -1) {
$scope.communityList.push(communityId);
} else {
$scope.communityList.splice(index, 1)
// ^^^ ^
// remove starting_here one_element
}
console.log($scope.communityList);
};
// ... content omitted

I guess you want to keep selection on screen to highlighted, for the same I don't think so you need to maintain extra collection list. Rather you can add flag isSelected on that record and toggle it based on user click.
HTML
I have and ng-repeat and ng-class for each element. I use it for selecting elements (add border for selected).
<a href="" class="messageBl message_preview animated"
ng-repeat='preview in messagelist.previewList'>
<div class="image_container_preview"
ng-class="{community_select: item.isSelected}"
ng-click='communitySelect(preview)'
attr="{{preview.preview_id}}">
</a>
Code
$scope.communitySelect = function(communityId) {
item.isSelected = !item.isSelected;
};
And whenever you need list of selected previews, you can easily loop over the previews collection and grab those ones who have isSelected flag ticked.
var selected = $scope.previews.map(i => i.isSelected);

Angular hide content on link click

I am trying to make a simple app with angular and I can't seem to figure how to hide content when I click links in navigation bar
<body ng-controller="MainCtrl">
<div class="navbar-fixed ">
<nav>
<div class="nav-wrapper teal lighten-1">
<i class="material-icons">dashboard</i>
<ul class="left">
<li class="waves-effect waves-light"><i class="material-icons">search</i>
</ul>
<ul class="right">
<li class="waves-effect waves-light"><i class="material-icons">perm_identity</i>
</ul>
</div>
</nav>
</div>
<div ng-hide>
<H1> must not show</H1>
</div>
<div ng-include="template">
</div>
</body>
Main controller:
var app = angular.module('Testing', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
var classApp = angular.module('classApp', []);
classApp.controller('classCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
When I click middle logo I want the content of body in this case "Must not show" should be hidden and display the template I'm using on body. Thanks

You need to bind the visibility to some scope variable; to show you can use:
<i class="material-icons">dashboard</i>
to hide you can use:
<li class="waves-effect waves-light"><i class="material-icons">search</i>
In your controller you define the function showTemplate like:
$scope.showTemplate = function(templateName, hideContent) {
$scope.template = templateName; //template to show
$scope.hideSection = hideContent; //true or false to hide/show the content
}
In this function you set the visible template and you hide or how some other section.
Then you need to bind the section you want to hide to hideSection variable:
<div ng-hide="hideSection">
<H1> must not show</H1>
</div>
ng-hide alone without any variable bound will not work

set all ng-if to false on click except clicked item

I have an ng-repeat which has a button that has a function that toggles an ng-show element inside that ng-repeat.
The inside the class movie_option span has an ng-click=toggleInfo($index):
And the div additional_info has an ng-show that shows or hides an element.
<ul ng-cloak="showResult">
<li class="search_results" ng-repeat="movie in movies | orderBy: '-release_date' track by $index">
<div class="movie_info">
<div class="movie_options">
<div class="slide">
<span class="movie_option">
<span><i class="fa fa-question-circle" aria-hidden="true" ng-click="toggleInfo($index)"></i></span>
</span>
</div>
</div>
</div>
<div class="additional_info" ng-show="hiddenDiv[$index]">
{{movie.overview}}
</div>
</li>
</ul>
When a user clicks on the icon it calls this function:
$scope.toggleInfo = function (index) {
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
}
This toggles the ng-show state from the hiddenDiv ng-show. This works fine.
What I wanted to do is put all hiddenDiv states on false except the one that is clicked so only one ng-show would be true.

That's a pure algorithm problem, not related to Angular.
Instead of having a boolean per item, it would be much simpler to just remember the element (index) that should be displayed:
<ul ng-cloak="showResult">
<li class="search_results" ng-repeat="movie in movies | orderBy: '-release_date' track by $index">
<div class="movie_info">
<div class="movie_options">
<div class="slide">
<span class="movie_option">
<span><i class="fa fa-question-circle" aria-hidden="true" ng-click="model.displayedIndex = $index"></i></span>
</span>
</div>
</div>
</div>
<div class="additional_info" ng-show="$index === model.displayedIndex">
{{movie.overview}}
</div>
</li>
</ul>
And in your controller $scope.model = {}
Fiddle: http://jsfiddle.net/6dkLqgfL/

I think this would do:
$scope.toggleInfo = function(index) {
for(var i in $scope.hiddenDiv) {
if(index != i)
$scope.hiddenDiv[i] = false;
}
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
}

You could just manually turn all the hiddenDiv elements to false when the toggleInfo function is fired.
$scope.toggleInfo = function(index){
for(int i = 0; i<($scope.hiddenDiv).length; i++)
$scope.hiddenDiv[i] = false;
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
}
See if this works?

Show/Hide(toggle) several blocks via Angular template engine

i need to show one and hide others.
in jquery i used 'this':
$('div').click(functiuon(){ this.show() });
maybe in Angular we can you use something like that?
<div class="toggle">
<span ng-click="this=!this ? true : false"></span><br/>
<span ng-if="this" >
111111111
</span>
</div>
<div class="toggle">
<span ng-click="this=!this ? true : false"></span><br/>
<span ng-if="this" >
2222222222222
</span>
</div>
etc this, this , this
I need to use only one varible for all blocks.

Any dom element interaction like clicking an element should be done within the directive and you can follow this to achieve what you want:
var app = angular.module('demoapp', []);
app.directive('toggleIt', function() {
return {
restrict: 'A',
link: function(scope, el, attrs) {
console.log(el.find('span'));
el.find('span').eq(0).on('click', function() {
el.find('span').eq(1).toggleClass('hide show');
});
}
};
});
.show{display:block;}
.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='demoapp'>
<div data-toggle-it class="toggle">
<span>toggle1</span>
<br/>
<span class='spn show'>
111111111
</span>
</div>
<div data-toggle-it class="toggle">
<span>toggle2</span>
<br/>
<span class='spn hide'>
2222222222222
</span>
</div>
<div data-toggle-it class="toggle">
<span>toggle3</span>
<br/>
<span class='spn hide'>
3333333333333
</span>
</div>
</div>

You can use ng-hide for hiding an element on true or ng-show for showing an element on true:
<div class="toggle">
<span ng-click="pop1=!pop1 ? true : false"></span><br/>
<span ng-show="pop1" >
111111111
</span>
</div>
<div class="toggle">
<span ng-click="pop2=!pop2 ? true : false"></span><br/>
<span ng-show="pop2" >
2222222222222
</span>
</div>

You can use ng-if, ng-show, ng-hide, ng-class (in conjunction with css), and ng-switch.
ng-show, ng-hide and ng-if have kind of the same logic behind them (if the given variable is true/false, show/hide the following content). There are some performance differences between them, but this subject is out of scope.
Showing/hiding elements with ng-class is just a particular use case of it, but its achievable nonetheless.
To sum it up, ng-hide, ng-show, ng-if hide/show elements based on the truth evaluation of a given variable, while ng-class toggles a class, like
$('#someElement').toggleClass('randomClassName');
Example:
HTML
<div ng-app="exampleApp" ng-init="switchr1 = true; switchr2 = true; switchr3 = true; switchr4 = show; ">
<h2>ng-if</h2>
<div class="toggle">
<span ng-click="switchr1 = switchr1 ? false : true">click me</span><br/>
<span ng-if="switchr1" >
shown by ng-if
</span>
</div>
<h2>ng-show</h2>
<div class="toggle">
<span ng-click="switchr2 = switchr2 ? false : true">click me</span><br/>
<span ng-show="switchr2" >
shown by ng-show
</span>
</div>
<h2>ng-hide</h2>
which is the same thing as ng-show, but with reversed logic<br>
<div class="toggle">
<span ng-click="switchr3 = switchr3 ? false : true">click me</span><br/>
<span ng-hide="!switchr3" >
shown by ng-hide
</span>
</div>
<h2>ng-class</h2>
<div class="toggle">
<span ng-click="switchr4 = (switchr4=='show') ? 'hide' : 'show'">click me</span><br/>
<span ng-class="switchr4" >
hidden by ng-class
</span>
</div>
</div>
Notice, that you initiate switchr1, switchr2 and so on in the ng-init directive. You could have also done that in the js code, using $scope, but I did it this way for the sake of simplicity.
JS
var app = angular.module('exampleApp', []);
CSS
.hide {
display: none;
}
.show {
display: initial;
}
I also wrote some working code/full example for you:
http://codepen.io/VanTudor/pen/EKYZwM

change the text of the button on click using angular JS

How I can change the text of the button on click of the button.
Here it is what I have tried.
HTML:
<button ng-click="toggle = !toggle">Toggle!</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
JS:
function MainController($scope) {
$scope.toggle = true;
}

Or, keep all the content in your HTML, rather than defining the button text in the controller, if you prefer:
<button ng-click="toggle = !toggle">
<span ng-show="toggle">Toggle to Off</span>
<span ng-hide="toggle">Toggle to On</span>
</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

I think, using a watch of toggle should do it
<button ng-click="toggle = !toggle">{{toggleText}}</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
then
app.controller('AppController', function ($scope) {
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Toggle!' : 'some text';
})
})
Demo: Fiddle

I would use neither watch nor ng-show because of their performance. That is simple as this:
app.controller('AppController', function ($scope) {
$scope.toggle = true;
})
<button ng-click="toggle = !toggle">{{toggle && 'Toggle!' || 'some text'}}</button>

Here's my solution, supporting translation:
HTML:
<span class="togglebutton">
<label>
<input type="checkbox" checked="{{myApp.enabled}}"
ng-model="myApp.enabled" ng-click="toggleEnabled()">
<span translate="{{myApp.enableCaption}}">Is Enabled?</span>
</label>
</span>
JS - Controller:
$scope.toggleEnabled = function() {
$scope.myApp.enableCaption = $scope.myApp.enabled ? 'global.enabled' : 'global.disabled';
};
where global.enabled and global.disabled refer to i18n JSON translations. You also need to initialize enableCaption in JS, in place where you create an empty object.