Get selected button id in array using AngularJS - javascript

I am trying to get id's of selected buttons in an array from button-checkbox. I am able to successfully show the selected button's id in view but unable to get the selected ids in array form in controller.
Here is my HTML code
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(availability.services)" btn-checkbox >{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>
</html>
and here is controller
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A',id:1 },
{ name:'Service B',id:2},
{ name:'Service C',id:3 },
{ name:'Service D',id:4}
];
$scope.availability = { services:services };
});
please see the plnker link
http://plnkr.co/edit/DeVPNug9APWWpwZByvnu?p=preview

Here you go:
$scope.getSelectedIDs = function() {
var ids = [];
angular.forEach($scope.availability.services, function(service) {
if (service.selected) {
ids.push(service.id);
}
})
return ids;
};
Now, just call the method $scope.getSelectedIDs() anywhere in your controller where you want the selected ids in array.
http://plnkr.co/edit/rS47sIEo1HaaDqrc3BUw?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [{
name: 'Service A',
id: 1
}, {
name: 'Service B',
id: 2
}, {
name: 'Service C',
id: 3
}, {
name: 'Service D',
id: 4
}];
$scope.availability = {
services: services
};
$scope.getSelectedIDs = function() {
var ids = [];
angular.forEach($scope.availability.services, function(service) {
if (service.selected) {
ids.push(service.id);
}
})
return ids;
};
$scope.alertMeSelectedIDs = function() {
console.log($scope.getSelectedIDs());
alert($scope.getSelectedIDs());
};
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(availability.services)" btn-checkbox>{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span>
</div>
<br>
<a ng-click="alertMeSelectedIDs()">Show me selected</a>
</body>
</html>

I have forked the code: http://plnkr.co/edit/eQxsq194qqRUo8Vs326H?p=preview
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A',id:1 },
{ name:'Service B',id:2},
{ name:'Service C',id:3 },
{ name:'Service D',id:4}
];
$scope.availability = { services:services };
$scope.test = function (service){
console.log (service);
}
});
HTML
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(service)" btn-checkbox >{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>

Related

I am using angularJS-transtale and i want to change the values in configuration part

I have built a small application to switch languages
I create a controller where I get the value from ng-model and then assign the value to a variable. I need help to pass this value in app.config.
Code:
var app = angular.module("myApp", ['pascalprecht.translate']);
var name = 'Anuj';
app.controller("translateController", ["$scope", "$translate", function($scope, $translate) {
$scope.changeValue = function() {
name = $scope.textname;
$translateProvider.translations('en', en_translations);
}
$scope.changeLanguage = function(lang) {
$translate.use(lang);
}
}]);
app.config(["$translateProvider", function($translateProvider) {
var en_translations = {
"language": name,
"greeting": "Welcome Dinesh"
}
var sp_translations = {
"language": "Selected Language Spanish",
"greeting": "Bienvenida Dinesh"
}
$translateProvider.translations('en', en_translations);
$translateProvider.translations('sp', sp_translations);
$translateProvider.preferredLanguage('en');
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
<script data-require="angular-translate#*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="translateController">
<h1>Demo for angularJS translator</h1>
<input type="text" name="" ng-model="textname" /> {{textname}}
<button ng-click="changeValue()">Change</button>
<div>
<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('sp')">Spanish</button>
</div>
<h2>{{'language' | translate}}</h2>
Hello!!!
<p>{{'greeting' | translate}}</p>
</div>
</body>
</html>
You can see code in plunker

Insert new html element into every ng-repeat (AngularJS)

I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.
I'm doing ng-repeat of this array of objects:
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
then in the html file I have:
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
{{insertHTML(item.paragraph)}}
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element.
Here's the function:
$scope.insertHTML = function(str) {
var wrapper = document.createElement('div');
wrapper.innerHTML = str;
};
I created this plunker where you can check the whole code running
Try Directives. See demo here
var app = angular.module('plunker', []);
app.directive('myDir',function(){
return{
link : function(scope,element){
element.append(' <br><br><p>this is the beginning of box</p>');
element.append('<p>'+scope.item.name+'</p>');
element.append(' <p>this is the end of box<br><br><br></p>');
}}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});
<!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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<my-dir></my-dir>
</div>
</body>
</html>
You should use Angular's built in ng-bind-html and ngSanitize:
angular.module("demo", ["ngSanitize"]);
angular
.module("demo")
.controller("demoController", ["$scope", "$sce", function($scope, $sce) {
$scope.items = [{
name: "john",
paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
},
{
name: "rita",
paragraph: "<p>hi, im rita</p>"
},
{
name: "joe",
paragraph: "<p>hi, im joe</p>"
}
];
}])
.red {
background-color: red
}
.blue {
background-color: blue
}
.green {
background-color: green
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="demoController">
<p>hello everyone</p>
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
<div ng-bind-html="item.paragraph"></div>
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>
</html>

ng-change increment and decrement value in ng-repeat loop

I have a code like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer <input type="checkbox" ng-model="isTrue" ng-change="count=count+1" />
Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = true;
}]);
</script>
</body>
</html>
In this code when check the checkbox the count will be incremented. Here how to i check if checkbox is ticked, then only incremented, otherwise if untick, it will decremented. Please anyone help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer
<input type="checkbox" ng-model="isTrue" ng-change="isTrue ? (count=count+1) :(count=count-1) " />Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope',
function($scope) {
$scope.isTrue = false;
}
]);
</script>
</body>
</html>
try changing ng-change .
This will work for you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well" ng-repeat="Option in OptionList">
Are you {{Option.choice}} <input type="checkbox" ng-model="Option.value" ng-change="UpdateCount(Option)" />
Count: {{Option.count}}
<pre>{{Option.isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = false;
$scope.count = 0;
$scope.OptionList = [{
choice: "Developer",
value: false,
count: 0
},{
choice: "Tester",
value: false,
count: 0
},{
choice: "Lead",
value: false,
count: 0
},{
choice: "Architect",
value: false,
count: 0
}
];
$scope.UpdateCount = function(Option){
if(Option.value){
Option.count = Option.count + 1;
}
else {
Option.count = Option.count - 1;
}
}
}]);
</script>
</body>
</html>

Why wont my list amount count update when a new item is added?

So I've got a base from a source: https://codepen.io/Russbrown/pen/IgBuh?editors=1010 , for a simple to-do list which I will expand upon.
However, when I press the checkbox on an item, the total amount of items needing to be completed does not update.
Here is the code:
index.php:
<!DOCTYPE html>
<html lang="en" ng-app="ToDo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Ryan Shah">
<link rel="icon" href="img/favicon.ico">
<title>Todo List - Untitled</title>
<script src="app/angular.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="listCtrl">
<p>Remaining Tasks: {{getItems()}}</p>
<ul>
<li ng-repeat="item in list">
<input type="checkbox" ng-model="item.completed" />
<span class="completed-{{item.completed}}">{{item.itemText}}</span>
</li>
</ul>
<form>
<input class="add-input" placeholder="I need to..." type="text" ng-model="newItemText" ng-model-instant />
<button class="add-btn" ng-click="insert()"><h2>Add</h2></button>
</form>
</div>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
app.js:
var app = angular.module('ToDo', []);
app.controller('listCtrl', function listCtrl($scope) {
$scope.list = [
{
itemText: 'Hello World',
completed: false
},
{
itemText: 'Hello :)',
completed: false
}
];
$scope.getItems = function() {
return $scope.list.length;
};
$scope.insert = function() {
$scope.list.push({
text: $scope.newItemText,
completed: false
});
$scope.newItemText = '';
};
$scope.clear = function() {
$scope.list = _.filter($scope.list, function(item) {
return !item.completed;
});
};
});
N.B.: I tried using things like ng-true-value and ng-false-value on the checkboxes, but that didn't want to work either.
Help is greatly appreciated :)
Here is a working plunker based on your code.
I use a variable items instead of getItems so it updates when I change the value from the controller and added a ng-click to the checkbox.
<p>Remaining Tasks: {{items}}</p>
<ul>
<li ng-repeat="item in list">
<input type="checkbox" ng-model="item.completed" ng-click='check(item)'/>
<span class="completed-{{item.completed}}">{{item.itemText}}</span>
</li>
</ul>
And in the controller, I added a function check that increments or decrements if when check or uncheck the check box:
$scope.items = $scope.list.length;
$scope.check = function(item) {
console.log('check ' + item.completed);
if (item.completed) {
$scope.items--;
} else {
$scope.items++;
}
}
$scope.getItems = function() {
return $scope.list.length;
};
$scope.insert = function() {
$scope.list.push({
text: $scope.newItemText,
completed: false
});
$scope.items++;
$scope.newItemText = '';
};
Also,in the insert function I increment 'items' when we add a new item, so the total items left is accurate.
For the clear completed items, I added a button that class clear() via ng-click:
$scope.clear = function() {
console.log('clear');
for (var i = 0; i < $scope.list.length; i++) {
$scope.list[i].completed = false;
}
$scope.items = $scope.list.length;
};
And the HTML:
<button class="add-btn" ng-click="clear()">
<h2>Clear Completed</h2>
</button>
Let us know if that helps.
There is no code to invoke clear, so add to controller:
$scope.$watch('list', $scope.clear, true);
And in view
<p>Remaining Tasks: {{list.length || 0}}</p>
First, the new items aren't being shown because you have it:
text: $scope.newItemText,
instead of:
itemText: $scope.newItemText,
A snippet working counting the uncompleted items:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.list = [{
itemText: 'Hello World',
completed: false
}, {
itemText: 'Hello :)',
completed: false
}];
$scope.insert = function() {
$scope.list.push({
itemText: $scope.newItemText,
completed: false
});
$scope.newItemText = '';
// Supposing that all items will be added as uncompleted
$scope.listTotal++;
};
// Initialization of listTotal...
$scope.listTotal = $scope.list.filter(function(item) {
return !item.completed;
}).length;
$scope.get_total = function(item) {
// Easy way to increment / decrement the total
$scope.listTotal += item.completed ? -1 : 1;
};
});
})();
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<p ng-bind="'Remaining Tasks: ' + listTotal"></p>
<ul>
<li ng-repeat="item in list track by $index">
<input type="checkbox" ng-model="item.completed" ng-change="get_total(item)" />
<span class="completed-{{item.completed}}" ng-bind="item.itemText"></span>
</li>
</ul>
<form>
<input class="add-input" placeholder="I need to..." type="text" ng-model="newItemText" ng-model-instant />
<button class="add-btn" ng-click="insert()">
<h2>Add</h2></button>
</form>
</div>
</body>
</html>
I hope it helps.

Not able to display view in Angular

Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>
In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>

Categories