I have 3 elements, which shows by conditional. on click of them using the 'ng-class' I am showing or hiding the element.
here is the HTML :
<div class="userOptions">
<div class="row designOption" ng-class="{'active':proDesign}">
<span ng-click="categories('proDesign')" class="icon iconD">D</span>
<span class="info infoD">Design</span>
</div>
<div class="row suplyOption" ng-class="{'active':Supply}">
<span ng-click="categories('proSupply')" class="icon iconS">S</span>
<span class="info infoS">Supply</span>
</div>
<div class="row constOption" ng-class="{'active':Construct}">
<span ng-click="categories('proConstruct')" class="icon iconC">C</span>
<span class="info infoC">Construction</span>
</div>
</div>
But using the scope function I am not able to shuffle the class name active. here is my try:
$scope.proDesign = false;
$scope.proConstruct = false;
$scope.proSupply = false;
$scope.categories = function (categ) {
$scope.proDesign = false; //all are false.
$scope.proConstruct = false;
$scope.proSupply = false;
$scope[categ] = !$scope[categ]; //became true
}
But this is not working. if so, what is the correct way to do this?
Related
I have seen similar questions related to this but this is different. In most of the questions, ng-hide/show fired on ng-click event.
Here is the code.
$scope.showDetails = 0;
$scope.delete = function(event) {
alert(event.target.id);
$scope.showDetails = 1;
//There would be more code for delete function. Some Ajax calls will be here.
}
<div ng-repeat="suggestions1 in suggestions">
<div class="col-xs-12 alert alert-info" ng-if="showDetails == '0'">
<center>
<a ng-click="delete($event)" id={{suggestions1.id}} class = "btn btn-danger">
<font size = "4">
<i class="fa fa-times-circle"></i>
</font>
Delete
</a>
</center>
</div>
</div>
Problem is when I click on the button it hides all the divs. I am expecting one div to hide but it is hiding all the div inside ng-repeat.
I have searched for multiple questions and tried the solutions but the issue still persists.
In that case you need to have a property named showDetails in each object of your new_suggestions array and enable ng-if based on that.
<div ng-repeat="suggestions1 in news_suggestions">
<div class="col-xs-12 alert alert-info" ng-if="suggestions1.showDetails == '0'">
Your code is logically wrong. You are keeping only one copy of showDetails variable. You need some property which is related to each object.
Try like this
$scope.delete = function(index) {
$scope.news_suggestions[index].hideDetails = true;
}
<div ng-repeat="suggestions1 in news_suggestions">
<div class="col-xs-12 alert alert-info" ng-hide="suggestions1.hideDetails">
<center> <a ng-click="delete($index)" id={{suggestions1.id}} class = "btn btn-danger"> <font size = "4"><i class="fa fa-times-circle"></i></font> Delete </a> </center></div></div>
There's one more approach:
// add an array
$scope.hiddenIds = [];
<div ng-repeat="suggestions1 in news_suggestions">
<!-- check if hidden -->
<div ng-hide=" hiddenIds.indexOf(suggestions1.id)>-1 " class="col-xs-12 alert alert-info">
<center>
<!-- remove/add to hidden array on click -->
<a ng-click=" hiddenIds.indexOf(suggestions1.id)>-1 ? hiddenIds.splice(hiddenIds.indexOf(suggestions1.id),1) : hiddenIds.push(suggestions1.id) " id={{suggestions1.id}} class = "btn btn-danger">
Here you don't modify the existing collection of elements.
Hint: if you hide the show/hide button, you won't be able to show the element back again. So you probably want to change your html layout a bit ;)
EDIT
Version 2:
You can always move it from your html to the scope.
// add an array
$scope.hiddenIds = [];
$scope.checkHide = function(suggestions1){
return $scope.hiddenIds.indexOf(suggestions1.id)>-1;
};
$scope.clickHide = function(suggestions1){
$scope.hiddenIds.indexOf(suggestions1.id)>-1 ? $scope.hiddenIds.splice($scope.hiddenIds.indexOf(suggestions1.id),1) : $scope.hiddenIds.push(suggestions1.id) ;
};
<div ng-repeat="suggestions1 in news_suggestions">
<!-- check if hidden -->
<div ng-hide="checkHide(suggestions1)" class="col-xs-12 alert alert-info">
<center>
<!-- remove/add to hidden array on click -->
<a ng-click="clickHide(suggestions1)" id={{suggestions1.id}} class = "btn btn-danger">
EDIT 2
If you don't need that element in news_suggestions (you're not planning to show it back again), you can simply remove it, which is even easier :)
$scope.remove = function(i){
$scope.news_suggestions.splice(i,1);
};
<div ng-repeat="suggestions1 in news_suggestions track by $index">
<div class="col-xs-12 alert alert-info">
<center>
<!-- remove by index on click -->
<a ng-click="remove($index)" id={{suggestions1.id}} class = "btn btn-danger">
JSBin
Yes, something wrong with your logic. Try this:
$scope.delete = function(el){
el.hideDetails = true;
}
<div ng-repeat="suggestions1 in news_suggestions">
<div class="col-xs-12 alert alert-info" ng-hide="hideDetails">
<center> <a ng-click="delete(this)" id={{suggestions1.id}} class = "btn btn-danger"> <font size = "4"><i class="fa fa-times-circle"></i></font> Delete </a> </center></div></div>
Hi I have user list in chat application page developed in Ionic v1.
<div class="user-names">
<div class="card hovercard" ng-controller="CommunicationController" ng-repeat="person in allUsers">
<div class="ufor-pname">
<button title= "{{person.name}}" id="firstUser" value="{{person.name}}" class="button button-dark fuser-btn all-time-fix" ng-click = "getChat('{{person.id}}','{{person.name}}','{{LoggedInUserId}}')">
<img class="img-circle-main img-user" src="http://{{person.image}}" width="50px" height="50px">
</button>
<span class="user1-name"> {{person.name}} </span>
</div>
</div>
</div>
I want to add active class while user will click any of the user in list given over there.
//Controller
$scope.getChat = function (userIdFrom,messageFromName,LoggedInUserId) {
$rootScope.userIdFrom = userIdFrom;
$ionicLoading.show();
}
Any help will be appreciated.
Thanks advance.
Add data-ng-style="getStyle(person.id)" in Your HTML like below
<div class="user-names">
<div class="card hovercard" ng-controller="CommunicationController" ng-repeat="person in allUsers">
<div class="ufor-pname" data-ng-style="getStyle(person.id)">
<button title= "{{person.name}}" id="firstUser" value="{{person.name}}" class="button button-dark fuser-btn all-time-fix" ng-click = "getChat('{{person.id}}','{{person.name}}','{{LoggedInUserId}}')">
<img class="img-circle-main img-user" src="http://{{person.image}}" width="50px" height="50px">
</button>
<span class="user1-name"> {{person.name}} </span>
</div>
</div>
</div>
Add one function for getStyle(); in your JS Code for return background color for selected person id.
//Function for set bakground color .
$scope.getStyle = function(person) {
$scope.Style = '';
if ($rootScope.userIdFrom == person) {
$scope.Style = '#F8F7D9';
}
return {'background-color': $scope.Style};
}
$scope.getChat = function (userIdFrom, messageFromName, LoggedInUserId) {
$rootScope.userIdFrom = userIdFrom;
$ionicLoading.show();
}
I have a condition and it is only on selecting an image among the optional images the next button needs to get enabled and also next should not get enabled on last outer select.
The problem here is on selecting the first image, the button is getting enabled and the scope is assigning the value to false and it is not getting true for the second iteration of images. How can I fix this issue?
<div class="col-xs-6 col-md-10 col-lg-7">
<div ng-repeat="outer in outers track by $index">
<div ng-if="outer_index== $index">
<div ng-bind="::outer.label"></div>
<ul class="list-group">
<li class="cursorPointer" ng-repeat="inner in outer.inners | orderBy: 'id'" ng-class="{'selected': getSelectedClass($parent.$index, $index)}" class="deselected">
<div class="col-xs-6">
<div class="img">
<img ng-src="data:image/png;base64,{{inner.base64Icon}}" alt="{{inner.description}}" title="{{inner.description}}"
ng-click="process()">
<div class="desc" ng-bind="inner.description"></div></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div><button type="button" class="btn btn-info" ng-disabled="outer_index == outers.length -1 || disableNext" ng-click="getNext()">Next</button></div>
In JS code, to activate the button only if,
$scope.disableNext=true;
$scope.process = function() {
$scope.disableNext=false;
}
$scope.getNext = function (){
$scope.outer_index = $scope.outer_index + 1;
$scope.datas = $scope.outers[$scope.outer_index];
}
NOTE: I tried
ng-click="process();disableNext=false;" for this condition won't work within ng-repeat.
Just set the disableNext to true after selecting next and it works!
$scope.getNext = function() {
$scope.disableNext=true;
$scope.outer_index = $scope.outer_index + 1;
$scope.datas = $scope.outers[$scope.outer_index];
}
I have 2 popup's which is controller by a service in a page. on click on the div element i am calling the controller function. after i added the 2nd popup directive especially some times the ng-click not working properly. how to solve this?
here is my service.js
"use strict";
angular.module("tcpApp").service("modalService", function ( $rootScope) {
//header configuration
$rootScope.hideModal = function() {
$rootScope.showModal = false;
};
this.changePass = function ( configId ) {
$rootScope.showModal = true; //this is for global
$rootScope.currentConfigPopView = 'views/tools/'+configId+'.html';
$rootScope.$apply();
};
this.showSummary = function () {
this.showSummaryPop = true;
}
this.hideSummary = function () {
this.showSummaryPop = false; //this is within controller
}
});
html:
<div class="statusBoard board8" ng-click='modal.showSummary("board8")'>
<span><img src="../images/iconDetails.png" alt="icon plan and actual"></span>
<h2>{{boardAssets.board8.title}}</h2>
<span class="row dwo">
<span class="catg">Total Issue Reported</span>
<span class="cd issueData">{{contractor.IssueDetails.TotalIssue}}</span>
</span>
<span class="row mas">
<span class="catg">Issue Resolved</span>
<span class="cd resolveData">{{contractor.IssueDetails.IssueResolved}}</span>
</span>
<span class="row rfi">
<span class="catg">Issue Remaining</span>
<span class="cd remainData">{{contractor.IssueDetails.IssueRemaining}}</span>
</span>
</div>
<body-footer></body-footer>
<config-popup></config-popup> //after i added this directive getting ng-click issue.
<modal-popup></modal-popup>
config popup html:
<div class='ng-modal' ng-if="showModal">
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-dialog-content'>
<ng-include src="currentConfigPopView"></ng-include>
</div>
</div>
</div>
I am working with angular js for my dashboard. I have an over all minimize button to minimize all widget and then each widget have own minimize button. I done with following script its not working.
when i click widget minimize button its minimize all widget. but i want minimize that widget only.
var dashboard = angular.module("dashboard",['ui.bootstrap']);
dashboard.controller('dash-control', ['$scope', function($scope) {
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.toggleonce= function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}]);
HTML code like follow:
<div class="contentpanel" ng-app="dashboard" ng-controller="dash-control as ctrl">
<button class="btn btn-white" type="button" ng-click="toggle()"><i class="fa fa-minus-square"> </i> </button>
<div>
<i class="fa fa-minus"></i>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 1</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
<div>
<i class="fa fa-minus"></i>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 2</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
......
.....
.....
</div>
I would rather create a directive with isolated scope for represent a inner widget. for instance;
dashboard.directive('myWidget',function(){
return {
scope:{},
template:"<div>\r\n<a href=\"\" class=\"tooltips\" ng-click=\"toggleonce()\" title=\"Minimize Panel\"><i class=\"fa fa-minus\"><\/i><\/a>\r\n<div class=\"row tinychart\" ng-show=\"isHidden\">asdasdasd<\/div>\r\n<div class=\"row tinychart\" ng-hide=\"isHidden\">sdasdasd<\/div>\r\n\r\n <\/div>",
link:function($scope)
{
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.togglesingle = function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}
}
});
Then In Html Body;
<div class="contentpanel" ng-app="dashboard" >
<button class="btn btn-white" type="button" ng-click="toggle()"><i class="fa fa-minus-square"> </i> </button>
<div my-widget></div>
<div my-widget></div>
</div>
Note that I haven't run and check the example. I hope you got the idea.
Edited:
The ng-repeat will loop the array (list) and initiate each element to 'item' variable. You can pass that data to your directive. Check the updated code.