I am working in angularjs and I need to toggle div in ng-repeat but its not working fine. jQuery click is also not working on this. On click of pregroupMem() anchor tag I am calling this function. and data id coming from this function and I am using this as membersList in listdiv div. I need to toggle this div on click of "custom-cn" anchor tag.There are multiple lists and in each of these lists there are there multiple listdivs . I need to toggle the particular div on the click of anchor tag of list.
This is my js to get all groups of members.
localStorageService.set('grpOpen', grps.openGroups);
localStorageService.bind($scope, 'grpOpen');
grs.init = init;
function init()
{
getMyData();
}
$scope.data = null;
DataService.getMyData().then(function successCallback(response)
{
$scope.data = response.data.results;
$scope.grpOpen.length = 0;
$scope.grpOpen.push({'data': response.data.results});
},function errorCallback(response) {
});
This is js to get all members list of a group.I have updated this according to your
$scope.open = -1;
$scope.pregroupMem = function(index,id,e){
$rootScope.membersList = '';
// $rootScope.membersList.length = 0;
$scope.loading= true;
DataService.getGrpMem(id).success(function (data) {
$rootScope.membersList = data.results;
$scope.data[index].shown = !$scope.data[index].shown;
if( $scope.open >= 0 && $scope.data[$scope.open] ){
$scope.data[$scope.open].shown = !$scope.data[$scope.open].shown;
}
if( $scope.open !== index ){
$scope.data[index].shown = !$scope.data[index].shown;
}
$scope.open = index;
}).catch(function (err) {
// Log error somehow.
})
.finally(function () {
// Hide loading spinner whether our call succeeded or failed.
$scope.loading = false;
});
}
<ul>
<li ng-repeat="groupsw in grpOpen[0].data track by $index">
<a ng-click="pregroupMem($index,groupsw.grpId,$event)" class="custom-cn" href="javascript:;">{{ groupsw.grpName }}</a>
<div class="listdiv">
<ul class="userlist">
<li ng-repeat="mymembers in membersList">
<a class="add_user" href="javascript:;"><i class="fa fa-user-plus"></i></a>
<div class="userlist">
<span class="usnermalissval" ng-if="mymembers.Name != null">{{mymembers.Name}}</span>
</div>
</li>
</ul>
</div>
</li>
</ul>
You can do it in following way:
angular
.module('app', [])
.controller('MyController', function($scope) {
$scope.data = [
{grpId: 1, grpName: 'One'},
{grpId: 2, grpName: 'Two'},
{grpId: 3, grpName: 'Three'},
{grpId: 4, grpName: 'Four'},
{grpId: 5, grpName: 'Five'}
]
$scope.open = -1;
$scope.pregroupMem = function(index, id, e) {
e.preventDefault();
if( $scope.open >= 0 && $scope.data[$scope.open] ){
$scope.data[$scope.open].shown = !$scope.data[$scope.open].shown;
}
if( $scope.open !== index ){
$scope.data[index].shown = !$scope.data[index].shown;
}
$scope.open = index;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<ul ng-controller="MyController">
<li ng-repeat="groupsw in data">
<a ng-click="pregroupMem($index, groupsw.grpId, $event)" class="custom-cn" href="javascript:;">{{ groupsw.grpName }}</a>
<div class="listdiv" ng-show="groupsw.shown">
<ul class="userlist">
This is a child div of grpId: {{groupsw.grpId}}
</ul>
</div>
</li>
</ul>
</div>
Related
I am using angularjs I have two list when I click first one I will push the value into another scope and bind the value to second list. Now my requirement is when first list values which are moved to second list, I need to change the color of moved values in list1
Here I attached my fiddle
Fiddle
You can use findIndex and ng-class together to check if the second list contains the same item as first. If present apply css class to the first list item.
JS:
$scope.checkColor = function(text) {
var index = $scope.linesTwos.findIndex(x => x.text === text);
if (index > -1) return true;
else return false;
}
HTML:
<li ng-click="Team($index,line.text)" ng-class="{'change-color':checkColor(line.text)}">{{line.text}}</li>
Working Demo: https://jsfiddle.net/7MhLd/2659/
You can do something like this:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.lines = [{
text: 'res1'
},
{
text: 'res2'
},
{
text: 'res3'
}
];
$scope.linesTwos = [];
$scope.Team = function(index, text) {
var obj = {};
obj.text = text;
$scope.linesTwos.push(obj)
}
$scope.Team2 = function(index, text2) {
$scope.linesTwos.splice(index, 1)
}
$scope.containsObj = function(obj, list) {
var i;
for (i = 0; i < list.length; i++) {
if (angular.equals(list[i], obj)) {
return true;
}
}
return false;
};
}
.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="line in lines">
<li ng-class="{'clicked': containsObj(line,linesTwos)}" ng-click="Team($index,line.text)">{{line.text}}</li>
</ul>
<ul>
<li>__________</li>
</ul>
<ul ng-repeat="line in linesTwos">
<li ng-click="Team2($index,line.text)">{{line.text}}</li>
</ul>
</div>
you have to achieve it using ng-class and create a dynamic class style for pushed data please check my working example fiddle
JS fiddle sample
in HTML nedd to do these changes
<li ng-click="Team($index,line.text,line)" ng-class="{'pushed':line.pushed}">
<li ng-click="Team2($index,line.text,line)">
In css
.pushed{color:red;}
In Controller
`$scope.Team=function(index,text,line){
var obj={};
obj = line;
$scope.linesTwos.push(obj)
line.pushed = true;
}`
`scope.Team2 = function(index,text2,line){
$scope.linesTwos.splice(index,1)
line.pushed = false;
}
`
its because angular two way binding
I am trying to do an edit field in angular js but I don't know how to do that one help me
below is my Crud operation code
var app = angular.module('myApp', [])
app.controller('myCtrl', ['$scope', function($scope) {
$scope.products = ["venu", "balaji", "suresh"];
$scope.addItem = function() {
$scope.errortext = "";
if (!$scope.addMe) {
return;
}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe)
} else {
$scope.errortext = "The item is already in your names list.";
}
}
$scope.removeItem = function(x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">ADD</button>
<p>{{errortext}}</p>
<p>Try to add the same name twice, and you will get an error message.</p>
</div>
</div>
I am doing crud operations in angular js. i have done Delete and Add but I dont know how to do Edit operation in angular js
var app = angular.module('myApp', [])
app.controller('myCtrl', ['$scope', function($scope) {
$scope.products = ["venu", "balaji", "suresh"];
$scope.addItem = function() {
$scope.errortext = "";
if (!$scope.addMe) {
return;
}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe)
} else {
$scope.errortext = "The item is already in your names list.";
}
$scope.addMe = "";
}
$scope.removeItem = function(x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
$scope.edit = function(index){
$scope.addMe = $scope.products[index];
$scope.products.splice(index, 1);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}
<span ng-click="removeItem($index)">×</span>
<span style="color:blue;cursor:pointer;" ng-click="edit($index)">Edit</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">ADD</button>
<p>{{errortext}}</p>
<p>Try to add the same name twice, and you will get an error message.</p>
</div>
</div>
Try this.
The solution is here:
HTML
<li ng-repeat="x in products" ng-click="preEdit(x, $index)">{{x}}<span ng-click="removeItem($index)">×</span></li>
<input ng-model="addMe">
<button ng-if="isAdd" ng-click="addItem()">ADD</button>
<button ng-if="!isAdd" ng-click="editItem()">EDIT</button>
JS
$scope.isAdd = true;
$scope.preEdit = preEdit;
var index = '';
function preEdit(x, i){
$scope.addMe = x;
index = i;
$scope.isAdd = false;
}
$scope.editItem = editItem ;
function editItem (){
$scope.products[index] = $scope.addMe;
$scope.isAdd = true;
$scope.addMe = '';
index = '';
}
Look my solution in filddle: https://jsfiddle.net/tfx8njw6/
At first you need to add a edit option on the <li> say,
<ul>
<li ng-repeat="x in products">{{x}}
<span ng-click="removeItem($index)">×</span>
<span ng-click="editItem($index)">Edit</span>
</li>
</ul>
Then add a controller function for edit editItem() like
$scope.editItem= function(index) {
$scope.addMe = $scope.products[index];
//this variable will allow you to check whether the operation is an edit or add
$scope.editIndex = index;
}
You can then reuse your addItem() function like this
$scope.addItem = function() {
$scope.errortext = "";
if (!$scope.addMe) {
return;
}
if(angular.isDefined($scope.editIndex)){
$scope.products[$scope.editIndex] = $scope.addMe;
//reset the variable to undefined after using it
$scope.editIndex = undefined;
}else{
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your names list.";
}
}
}
If you want to take it to the "next level", check out xeditable. :)
https://vitalets.github.io/angular-xeditable/#text-simple
Good luck!
For Edit what you can do:
0.Pass the id on edit click and get data of that id and assign to the same variable you have used for add and hide add button and show update button.
1.Either use the same text field which you are using for add and show/hide button add/update accordingly.
2.You can use separately div which includes one text box and button to update.Show/hide as per you action.
hello i'm trying to get element from the DOM in angular directive.
this element:
click image
i'm trying to get this element by unknow id this is the code:
pass user object:
<dashboard user="user" action="pageSelect(name,pageNumber)"></dashboard>
in templateUrl directive:
<section>
<li id="Dashboard{{$index}}" ng-repeat="dashboard in user.NavigationMenu">
<h3 class="PovDashboard">
<i class="fa fa-tachometer"></i>
{{dashboardName}}
</h3>
<ul class="povPages">
<li ng-repeat="page in dashboard.Pages"> <i class="povIconRight fa fa-angle-double-right"></i></li>
</ul>
</li>
and this is the problem:
scope.$watch('user', function(newValue) {
if (newValue !== undefined) {
console.log(scope.user.NavigationMenu[0].Pages);
var defaultDashboard = scope.user.DefaultDashboardID;
console.log(scope.user);
angular.forEach(scope.user.NavigationMenu,function(value,key){
if(value.ID === defaultDashboard){
console.log(key);
// i tried everything
var s = '#Dashboard' + key;
var e = angular.element.find(s)
//e is empty
console.log(e);
//i'm trying to do
//e.('.povPages').first().css("display","block");
}
})
}
});
thanks in advance
You are not using the jqLite wrapper angular.element() syntactically correct, i guess you should try with this:
angular.element(s).find('ul').css('display', 'block');
If you are not using jQuery then .find() will have a lookup at tagnames only.
From the docs:
find() - Limited to lookups by tag name
Or better do it with angular way with ng-show/ng-hide:
<ul class="povPages" data-ng-show='isVisible'>
initialize $scope.isVisible = false;now in the .$watch() do this:
scope.$watch('user', function(newValue) {
if (newValue != undefined) {
console.log(scope.user.NavigationMenu[0].Pages);
scope.isVisible = newValue != undefined ? true : false;
console.log(scope.user, scope.isVisible);
}
});
A sample demo:
angular.module('demoapp', []).controller('demoCtrl', ['$scope', '$timeout',
function($scope, $timeout) {
$scope.arr = [{
text: "one"
}, {
text: "two"
}];
$scope.isVisible = false;
$timeout(function() {
$scope.isVisible = true;
}, 2000);
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='demoapp' ng-controller='demoCtrl'>
<div ng-repeat="obj in arr">
<h1>see if list is visible == {{isVisible}} {{obj.text}}</h1>
<ul ng-show='isVisible'>
<li>should be visible after value change. {{obj.text}}</li>
</ul>
</div>
</div>
I am working on chaining multiple filters, but while thinking it through i realised that it creates an extreme amount of code (redudancy would be the best term in this use-case), which made me wonder if this could be done more dynamically/generalized. Basically i have 5-6 dropdown menu where a user can select one or more options to filter the data with. I have made this based on one dropdown menu but i want to extend this further. In this code sample i have one dropdown menu which sorts out based on one column.
JavaScript:
<script>
'use strict';
var App = angular.module('App',['ngResource','App.filters']);
App.controller('ExerciseCtrl', ['$scope','$http', function($scope, $http) {
$scope.selectedMainMuscle = [];
$http.get('/rest/exercises/')
.then(function(res){
$scope.exercises = res.data;
});
$scope.orderProp = 'name';
$http.get('/rest/muscles/')
.then(function(res){
$scope.muscles = res.data;
});
$scope.isChecked = function () {
if (_.contains($scope.selectedMainMuscle, this.muscle.id)) {
return 'glyphicon glyphicon-ok pull-right';
}
return false;
};
$scope.setSelectedMainMuscle = function () {
var id = this.muscle.id;
if (_.contains($scope.selectedMainMuscle, id)) {
$scope.selectedMainMuscle = _.without($scope.selectedMainMuscle, id);
} else {
$scope.selectedMainMuscle.push(id);
}
return false;
};
}]);
angular.module('App.filters', []).filter('mainMuscleFilter', [function () {
return function (exercises, selectedMainMuscle) {
if (!angular.isUndefined(exercises) && !angular.isUndefined(selectedMainMuscle) && selectedMainMuscle.length > 0) {
var tempClients = [];
angular.forEach(selectedMainMuscle, function (id) {
angular.forEach(exercises, function (exercise) {
if (angular.equals(exercise.main_muscle.id, id)) {
tempClients.push(exercise);
}
});
});
return tempClients;
} else {
return exercises;
}
};
}]);
</script>
HTML:
<div class="btn-group" ng-class="{open: dd2}">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="dd2=!dd2">Main muscle <span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="muscle in muscles">
<a href ng-click="setSelectedMainMuscle()">{%verbatim%}{{muscle.name}}{%endverbatim%} <span data-ng-class="isChecked()"></span></a>
</li>
</ul>
</div>
<table class="table table-hover" >
<tr><td><strong>Name</strong></td><td><strong>Main muscle</strong></td><td><strong>Equipment</strong></td></tr>
<tr ng-repeat="exercise in filtered = (exercises | mainMuscleFilter:selectedMainMuscle)">
{%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
</tr>
</table>
I would do all the checks in one filter, I don't see how a mainMuscleFilter would be reusable enough to warrant separation, let alone inclusion in a separate module. You can generalize your methods to toggle the inclusion of an id in an array and to check for the inclusion though:
$scope.selected = {
muscle: [],
equipment: []
};
$scope.isChecked = function (arr, id) {
if (_.contains(arr, id)) {
return 'glyphicon glyphicon-ok pull-right';
}
return false;
};
$scope.toggleInclusion = function (arr, id) {
var index = arr.indexOf(id);
if (index >= 0) {
arr.splice(index, 1);
} else {
arr.push(id);
}
return false;
};
HTML:
<li ng-repeat="muscle in muscles">
<a href ng-click="toggleInclusion(selected.muscle, muscle.id)">
{{muscle.name}}
<span data-ng-class="isChecked(selected.muscle, muscle.id)"></span>
</a>
</li>
I'm having trouble understanding some of the basics. Here are 2 controllers I have:
<form ng-controller="NewList" id="form" ng-submit="submit()">
<input name="title" ng-model="formData.title" placeholder="{{placeholders.title}}" />
<button type="submit">Generate</button>
<p ng-show="loading == 1">Loading...</p>
<p ng-show="loading == 2">Response: {{response}}</p>
</form>
<div id="lists" ng-controller="GetLists">
<ul>
<li ng-show="loading">Loading...</li>
<li class="list" ng-repeat="list in lists">
<b>{{list.id}}</b> : {{list.title}}
</li>
</ul>
</div>
JS:
function NewList($scope, $http) {
$scope.formData = { };
$scope.placeholders = { "title" : "List title" };
$scope.loading = 0;
$scope.submit = function() {
$scope.loading = 1;
$http.post(window.apiBase + 'lists/create', this.formData)
.success(function(response) {
$scope.response = response;
$scope.loading = 2;
});
}
}
function GetLists($scope, $http) {
$scope.loading = true;
$http.get(window.apiBase + 'lists/all').success(function(response) {
$scope.lists = response.lists;
$scope.loading = false
});
}
What I'm trying to achieve, is upon form submit, refresh the lists. Meaning, when .success() hits in NewList, call GetList and make it happen again. How do I achieve this?