I have a check box with a button.
When I click button checked, checkbox value should be pushed into an array. But it adds at the beginning of an array. I want to add checked checkbox value at the end of the array when clicking the button.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
<ul>
<li ng-repeat="album in albums">
<input type="checkbox" ng-model="album.selected" value={{album.name}} /> {{album.name}}
</li>
</ul>
<button type='button' ng-click="save()">Save</button><br>
<div ui-sortable="sortableOptionsList[0]" >
{{albumNameArray}}
</div>
<div ui-sortable="sortableOptionsList[0]">
<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
</div>
</body>
</html>
<script>
angular.module('test', ['ui.sortable'])
.controller('Test', function($scope){
$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];
function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.save = function(){
$scope.albumNameArray = [];
angular.forEach($scope.albums, function(album){
console.log(album.selected);
if(album.selected)
{
$scope.albumNameArray.push(album.name);
}
});
}
})
</script>
I have the perfect solution for your query. You just need to make a small change on the logic. Since you want to track the sequence on which the checkboxes are selected, i would suggest you the proper way in AngularJS, using ng-change on the checkbox.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
<ul>
<li ng-repeat="album in albums">
<input type="checkbox" ng-model="album.selected" value={{album.name}} ng-change='trackOrder(album)' /> {{album.name}}
</li>
</ul>
<button type='button' ng-click="save()">Save</button><br>
<div ui-sortable="sortableOptionsList[0]" >
{{albumNameArray}}
</div>
<div ui-sortable="sortableOptionsList[0]">
<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
</div>
</body>
</html>
<script>
angular.module('test', ['ui.sortable'])
.controller('Test', function($scope){
$scope.albumArray = [];
$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];
function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.trackOrder = function(album){
//add album in the array
if(album.selected){
$scope.albumArray.push(album.name);
}else{
//remove album fron the array
var index = $scope.albumArray.indexOf(album.name);
$scope.albumArray.splice(index,1);
}
}
$scope.save = function(){
//if you want the value on albumNameArray on click on save use this else you can
//use the $scope.albumArray directly
$scope.albumNameArray = angular.copy($scope.albumArray);
}
})
</script>
Here is the plunkr link PLUNKR
use unshift.
$scope.albumNameArray.unshift(album.name);
Related
I have a simple model with a list of names and corresponding images. I'm trying to click on the name of the image and load the corresponding image. I can't get the image to load. The list of names appears on the page, but when I click them nothing happens. Please help with code. Thx!
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel ="stylesheet" type "text/css" href ="clicker.css">
<script type = "text/javascript" src="Libs/angular.js"></script>
<script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>
<div ng-controller = "MainController">
<div ng-repeat = "cat in options.catList">
<h3 ng-click = "MainController.selectCat($index)">{{cat.name}}</h3>
<h3>{{MainController.selectedCat.name}}</h3>
<img ng-src = "{{MainController.selectedCat.images}}" >
</div>
</div>
</div>
</body>
</html>
JS
(function() {
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
$scope.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
],
};
vm.selectCat=function(pos) {
vm.selectedCat = angular.copy(vm.catList[pos]);
vm.selectedCat.pos = pos;
};
activate();
function activate() {
}
})
})();
You are mixing up $ scope and vm, go with one approach. You need to use controller as syntax in the template,
<div ng-controller = "MainController as vm">
DEMO
(function() {
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat = selectCat;
this.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<body>
<div ng-controller = "MainController as vm">
<div ng-repeat = "cat in vm.options.catList">
<h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>
<h3>{{vm.selectedCat.name}}</h3>
<img ng-src = "{{vm.selectedCat.images}}" >
</div>
</div>
</div>
</body>
</html>
Angular 1.4.x
In a ng-repeat I have a SELECT control and under it a DIV of details. When the SELECT is changed I wish to add a class to the DIV.
BEGIN ng-repeat
<select ng-change="???add a class XYZ to .details ???">...</select>
<div class="details">...</div>
END
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.selection = [];
$scope.isHighlighted = [];
$scope.items = [{
id: 1,
label: 'Label 1',
}, {
id: 2,
label: 'Label 2',
}];
$scope.selectionChanged = function(idx) {
$scope.isHighlighted[idx] = true;
}
});
.highlight {
color: red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js" data-semver="1.5.10"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<select ng-options="item as item.label for item in items track by item.id" ng-model="selection[$index]" ng-change="selectionChanged($index)"></select>
<div ng-class="{highlight:isHighlighted[$index]}">Some Div Content</div>
</div>
</body>
</html>
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="example.js"></script>
<script src="checklist-model.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role.text}}
</label>
<button ng-click="user.roles=[];" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkNth(0)">Check first</button>
<button ng-click="checkAll()">Check all</button>
<pre>{{ user.roles | json }}</pre>
</div>
<script>
angular.module('plunker', ['checklist-model']);
var DemoCtrl = function($scope) {
$scope.roles = [{
id: 1,
text: 'guest'
}, {
id: 2,
text: 'user'
}, {
id: 3,
text: 'customer'
}, {
id: 4,
text: 'admin'
}];
$scope.user = {
roles: [$scope.roles[1]]
};
$scope.checkAll = function() {
// this first method doesn't work
//$scope.user.roles = $scope.roles;
// this one work
for (i = 0; i < $scope.roles.length; i++)
$scope.checkNth(i);
};
$scope.checkNth = function(i) {
console.log("first", JSON.stringify($scope.user.roles));
$scope.user.roles.splice(i, $scope.user.roles.length);
console.log("second", JSON.stringify($scope.user.roles));
$scope.user.roles.push($scope.roles[i])
console.log("third", JSON.stringify($scope.user.roles));
}
};
</script>
</body>
</html>
Here the checklist-model not woking as i expected.
im new to angular js help me.
is there any need to add CDN?.
Here is a plunk with the solution, I just made the work as a toggle for now. You can change that yourself if you want it to behave otherwise.
http://plnkr.co/edit/tm29BSwUoiFKUgytvnHE?p=preview
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="plunker" ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" ng-model="role.checked" ng-change="toggleUserRole(role)"> {{role.text}}
</label>
<button ng-click="uncheckAll();" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkNth(0)">Check first</button>
<button ng-click="checkAll()">Check all</button>
<pre>{{ user.roles | json }}</pre>
</div>
<script>
var app = angular.module('plunker',[]);
app.controller('DemoCtrl', function($scope) {
$scope.roles = [{
id: 1,
text: 'guest',
checked: false
}, {
id: 2,
text: 'user',
checked: false
}, {
id: 3,
text: 'customer',
checked: false
}, {
id: 4,
text: 'admin',
checked: false
}];
$scope.user = {
roles: []
};
$scope.toggleUserRole = function(role){
if($scope.user.roles.indexOf(role) == -1){
$scope.user.roles.push(role);
}
else{
$scope.user.roles.splice($scope.user.roles.indexOf(role),1);
}
};
$scope.checkAll = function() {
for (i = 0; i < $scope.roles.length; i++)
$scope.checkNth(i);
if($scope.user.roles.indexOf($scope.roles[i]) == -1){
$scope.user.roles.push($scope.roles[i]);
}
};
$scope.checkNth = function(i) {
$scope.roles[i].checked = !$scope.roles[i].checked;
$scope.toggleUserRole($scope.roles[i]);
}
$scope.uncheckAll = function() {
for (i = 0; i < $scope.roles.length; i++)
$scope.roles[i].checked = false;
$scope.user.roles = [];
};
});
</script>
</body>
</html>
I have a situation where there are 3 check box ("initially checked"). Since it as 3 check box it will use ng-repeat for 3 time and loops the division for there time. Now once i uncheck any of the check box it should display div for 2 time. So far ,
$scope.items = [
{id: 0, title: "apple",selected:true},
{id: 1, title: "orange",selected:true},
{id: 2, title: "grapes",selected:true},
];
On ng-click in each check box i have called a function test("apple").
$scope.test = function(vals) {
$scope.vl=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].title == vals) {
console.log("dnt push");
}
else {
$scope.vl.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vl array");
console.log($scope.vl);
}
Problem I am facing is it works fine for 1st uncheck but not when i do for multiple uncheck. When i check unchecked its not loading div.
In HTML I am using like,
<div ng-repeat="item in vl"> some tags </div>
not quite sure about your question, but hope my answer can give you some hints.
plunker demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.items = [{
id: 0,
title: "apple",
selected: true
}, {
id: 1,
title: "orange",
selected: true
}, {
id: 2,
title: "grapes",
selected: true
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected">{{item.title}}
</div>
{{items | json}}
</body>
</html>
If and only if you want to put in an array the item who are checked :
http://plnkr.co/edit/DvoPBBvKf3AhYM4qcBhx?p=preview
html
<div ng-repeat="item in items">
<input type="checkbox"
ng-model="item.selected" ng-click="test(item.title)"> {{item.title}}
</div>
controller
$scope.test = function(vals) {
$scope.vl=[];
$scope.vlChecked=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].selected) {
$scope.vlChecked.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vlChecked array");
console.log(JSON.stringify($scope.vlChecked));
}
I was writing a code in html5 and angular js. I am encountering a problem in passing parameters with space. Here is my code :
angular.module('MyApp', [])
controller('MyCtrl', function($scope) {
$scope.validate = function(description,code) {
alert(description,code);
}
});
<!DOCTYPE html>
<html>
<body ng-app="MyApp">
<div ng-repeat="x in allItem.items" class="col-75" ng-controller="MyCtrl">
<a href="#" ng-click="validate({{x.itemDesc}},{{x.itemCode}})">
<div class="card item center">{{x.itemName}}
</div></a>
</div>
</body>
</html>
The JSON format is like this
Json contains
allItem
{
items
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
}
{
itemName: "Tomato",
itemDescr: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
}
I am not able to pass the parameters. I don't know how to pass the text that contains spaces and quotes('). Can anyone help me
Your Json needs to be an array, skip the href="#" and you do not need to bind within ng-click. The code below is fully functioning and running.
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.allItem =
{
items:[
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
},
{
itemName: "Tomato",
itemDesc: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
]
};
$scope.validate = function(description, code) {
console.log(description,'-', code);
};
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<br/>
<div ng-repeat="x in allItem.items" class="col-75">
<a ng-click="validate(x.itemDesc, x.itemCode)">
<div class="card item center">{{x.itemName}}
</div>
</a>
</div>
</body>
</html>