I have a small program where I have 3 checkboxes. I may check any or all of the checkboxes. I will need to alert the names of the People infront of whose id I have checked the checkboxes.
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="(key,x) in People">
<td><input type="checkbox" id="{{x.id}}" >{{x.name}}</td>
</tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.checkboxArray = [];
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
//alert function
$scope.alert = function(){
angular.forEach($scope.People, function(val,key) {
if('#val.id:checked'){
$scope.checboxArray + = $scope.People[key].name;
}
alert($scope.checkboxArray);
}
}
});
</script>
</body>
</html>
I am not sure if I am putting the condition properly inside if() condition. Can someone help?
You need to store the checked status using ng-model like below then find the checked items using the People array
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.checkboxArray = [];
$scope.People = [{
name: "Peter",
id: "201"
}, {
name: "Lina",
id: "202"
}, {
name: "Roger",
id: "203"
}];
//alert function
$scope.alert = function() {
var selected = $scope.People.filter(function(item) {
return item.checked
}).map(function(item) {
return item.name;
})
alert(selected);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController">
<table>
<tr ng-repeat="(key,x) in People">
<td>
<input ng-model="x.checked" type="checkbox" id="{{x.id}}">{{x.name}}</td>
</tr>
</table>
<button ng-click="alert()">Click</button>
<pre>{{People}}</pre>
</div>
</div>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="(key,x) in People">
<td><input type="checkbox" id="{{x.id}}" ng-model="x.checked">{{x.name}}</td>
</tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.checkboxArray = [];
$scope.People = [
{name:"Peter",id:"201", checked : false},
{name:"Lina",id:"202", checked : false},
{name:"Roger",id:"203", checked : false}
];
//alert function
$scope.alert = function(){
angular.forEach($scope.People, function(val,key) {
if(val.checked){
$scope.checboxArray.push(val.name);
} else{
alert(val.name ," is not checked");
}
}
}
});
</script>
</body>
</html>
Here's a working JSFIDDLE for your problem.
As Arun mentionned, the easiest way is to get the checked value using ng-model.
I updated your previous code and added my solution :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<td>
<input type="checkbox" ng-model="x.checked" id="{{x.id}}" >{{x.name}}<br/>
</td>
</tr>
</table>
<button ng-click="doAction()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201", checked:"false"},
{name:"Lina",id:"202", checked:"false"},
{name:"Roger",id:"203", checked:"false"}
];
$scope.doAction = function() {
for(var x = 0;x < $scope.People.length;x++)
{
if ($scope.People[x].checked == true)
alert($scope.People[x].name);
}
}
});
</script>
</body>
</html>
Related
I am new to AngularJS, and am working on my first Plunkr. When a user performs a search (from main.html, the corresponding controller is MainController), the correct view is being presented (user.html), but the data from the controller (UserController) is not being passed to the view. What am I doing wrong?
Here the link to the code:
http://plnkr.co/edit/OcfB6tBB36qWO9MiZ9CI?p=preview
Layout page (Index.html):
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
<script src="UserController.js"></script>
</head>
<body>
<h1>GitHub Viewer</h1>
<div ng-view></div>
</body>
</html>
Main page (main.html)
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="User name to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
User details page (user.html)
<h1>{{ user.name }}</h1>
{{ error }}
<div><img src="{{ user.avatar_url }}" title="{{user.name}}"> Order:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Repos</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number}}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
MainController.js - controls main.html:
var app = angular.module('githubViewer');
app.controller('MainController', function($scope, $http, $interval,
$log, $anchorScroll, $location) {
$scope.repoSortOrder = "-stargazers_count";
$scope.search = function(username) {
$log.info("Searching for " + username);
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
var decrementCountdown = function() {
$scope.countdown -= 1;
if($scope.countdown < 1) {
$scope.countdown = null;
$scope.search($scope.username);
}
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
});
UserController.js (controls user.html) -- this is where it seems to fail.
var app = angular.module('githubViewer');
app.controller("UserController", UserController);
var UserController = function($scope, $log, $http, $routeParams) {
var onUserComplete = function(response) {
$scope.user = response.data;
$http.get($scope.user.repos_url)
.then(onRepos, onError);
};
var onRepos = function(response) {
$scope.repos = response.data;
$location.hash("userDetails");
$anchorScroll();
};
var onError = function(reason) {
$scope.error = "Could not fetch the data";
};
$scope.username = $routeParams.username;
$scope.repoSortOrder = "-stargazers_count";
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
};
Any help will be appreciated.
I am new to AngularJs. It's a GitHub, datacontroller AngularJs program. Actually the data after using a controller, i.e checkbox is not coming and my ng-repeat is not working.
Can any anyone help me with this?
(function() {
var app = angular.module('app', []);
var mainController = function($scope, $http) {
$scope.message = "Angularjs";
$scope.reposortorder = "stargazers_count";
var onSuccess = function(response) {
$scope.obj = response.data;
$http.get($scope.obj.repos_url).then(onRepoSuccess, onError);
};
var onRepoSuccess = function(response) {
$scope.repos = response.data;
};
var onError = function(reason) {
$scope.error = "could not load the user details";
};
$scope.search = function(username) {
$http.get("https://api.github.com/users/" + username).then(onSuccess, onError);
};
};
var checkbox = function($scope, $filter, $http) {
$http.get("https://api.github.com/users/"+$scope.username)
.success(function(data) {
$scope.repos = data;
});
$scope.chckedIndexs = [];
$scope.checkedIndex = function(repo) {
if ($scope.chckedIndexs.indexOf(repo) === -1) {
$scope.chckedIndexs.push(repo);
} else {
$scope.chckedIndexs.splice($scope.chckedIndexs.indexOf(repo), 1);
}
};
$scope.selectedRepos = function() {
return $filter('repo.name')($scope.repos, {
checked: true
});
};
$scope.remove = function(index) {
angular.forEach($scope.chckedIndexs, function(value, index) {
var index = $scope.repos.indexOf(value);
$scope.repos.splice($scope.repos.indexOf(value), 1);
});
$scope.chckedIndexs = [];
};
$scope.checkAll = function() {
angular.forEach($scope.repos, function(repo) {
repo.select = $scope.selectAll;
});
};
};
app.controller("mainController", mainController);
app.controller("checkbox", checkbox);
}())
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Hello {{message}}</h1>
{{username}}
<div>
<form name="searchUser">
<input type="search" required placeholder="Github Username to find" ng-model="username">
<input type="submit" value="Search" ng-click="search(username)">
</form>
<br />
<div>{{ error}}</div>
<p>Name: {{ obj.name }}</p>
<p>Mail id: {{ obj.email }}</p>
<p>Image:
<br /><img ng-src="{{ obj.avatar_url}}" height="150" title="{{ obj.name}} {{obj.lastName}}" /></p>
<div>
<label>Search:</label>
<input type="search" ng-model="searchrepo" placeholder="Enter to Search">
</div>
<div ng-controller="checkbox">
<p>
Sort by:
<select ng-model="reposortorder">
<option value="name">Name</option>
<option value="stargazers_count">Stars</option>
<option value="language">Language</option>
</select>
</p>
<div>
<pre>selected with helper function {{selectedRepos()}}</pre>
<button ng-click="remove($index)">delete selected</button>
</div>
<table border="1">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="checkAll"></th>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos |filter:searchrepo | orderBy:reposortorder">
<td><input type="checkbox" ng-model="repo.checked" ng-click="checkedIndex(repo)"/></td>
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number }}</td>
<td>{{ repo.language}}</td>
<td><button ng-click="remove($index)">x </button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Here is the plnkr link https://plnkr.co/edit/T3AK2QnIMq18oEeMuCQk?p=preview
<div ng-controller="table">
This line is reason of malfunctioning. You don't have any "table" controller. You bind repos in your mainController. Remove the "table" controller from that div, everything will work!
Thanks
I need to hide rows depend on checkbox, using myfunction in ng-click to access dynamic values.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.jsonmain = ["brand","checkstatus","color","fabric","fit","package contents","size","sku","style","title","type","wash care"];
$scope.myfunction = function (skip) {
$scope.skip = !$scope.skip;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat = "skip in jsonmain">
<input type="checkbox" ng-click="myfunction(skip)" type="button" class="btn btn-success">{{skip}}</input>
</span>
<table style="border: 1px solid ;">
<tr>
<td style="border: 1px solid #dddddd;" ng-hide="{{display}}" ng-repeat= "display in jsonmain">
{{display}}
</td>
</tr>
</table>
</div>
You need to make the flag used to show or hide items part of the object model, but you can't do this directly because $scope.jsonmain is an array of strings. If you are able to alter $scope.jsonmain so that it is an array of objects then you can skip the part of this example where it is loading the array of strings into an array of objects.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.jsonmain = ["brand", "checkstatus", "color", "fabric", "fit", "package contents", "size", "sku", "style", "title", "type", "wash care"];
$scope.items = $scope.jsonmain.map(function(obj) {
var newObj = {
name: obj,
display: true
};
return newObj;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="item in items">
<label><input type="checkbox" ng-model="item.display" type="button" class="btn btn-success">{{item.name}}</label>
</span>
<table style="border: 1px solid ;">
<tr>
<td style="border: 1px solid #dddddd;" ng-show="item.display" ng-repeat="item in items">
{{item.name}}
</td>
</tr>
</table>
</div>
I want to print the values of a array based on the checkbox associated with it. Find the code below
Javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= [{name:"John",selected:"false"},{name:"Anil",selected:"false"},{name:"Kumar",selected:"false"}];
$scope.lastName= "Doe";
$scope.name1=[],
$scope.addname=function(){
angular.forEach($scope.firstName, function(name,selected){
if(selected=="true") {
alert(name);
$scope.name1.push(name)
}
});
}
});
html:
<div ng-app="myApp" ng-controller="myCtrl">
<table >
<tr ng-repeat="first in firstName">
<td><input type="Checkbox" ng-model="first.selected">{{first.name}}</td>
</tr>
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr>
<tr ng-repeat="nam in name1">{{nam}}</tr>
</table>
</div>
Keep selected value as Boolean than String
In forEach, first argument is Object, access the model associated with it using name.selected
Initialize name1 array in ng-click handler
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = [{
name: "John",
selected: false
}, {
name: "Anil",
selected: false
}, {
name: "Kumar",
selected: false
}];
$scope.lastName = "Doe";
$scope.addname = function() {
$scope.name1 = [];
angular.forEach($scope.firstName, function(name, selected) {
if (name.selected) {
$scope.name1.push(name)
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="first in firstName">
<td>
<input type="Checkbox" ng-model="first.selected">{{first.name}}</td>
</tr>
<tr>
<td>
<input type="Button" ng-click="addname()" value="Submit" ng-model="lastName">
</td>
</tr>
<tr ng-repeat="nam in name1">{{nam}}</tr>
</table>
{{name1}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= [{name:"John",selected:false},{name:"Anil",selected:false},{name:"Kumar",selected:false}];
$scope.lastName= "Doe";
$scope.name1=[];
$scope.addname=function(){
angular.forEach($scope.firstName, function(name){
if(name.selected === "true") {
$scope.name1.push(name);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table >
<tr ng-repeat="first in firstName">
<td><input type="Checkbox" ng-model="first.selected" ng-true-value="true" >{{first.name}}</td>
</tr>
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr>
<tr ng-repeat="nam in name1"><td>{{nam}}</td></tr>
</table>
</div>
I'm new to angular and js. I did a table (just a header) and a button. When I click the button a new row line is added. Every cell of that row is a form text field. Everithing works fine. Now I'm trying to do a second button, when I click it must iterate over the rows and validate the fields. I'm not finding any documentation about that... so i'm not sure if this mettod (add a new row with a button) is appropiate. That's how I did it:
index.html this contains angular and my script, also contains the routes:
<html ng-app="assets">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="sources/js/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script>
var assets = angular.module('assets', ['ngRoute']);
assets.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html'
}).
when('/:tipusactius', {
templateUrl: 'tipusactius.html',
controller: 'TipusActiusCtrl'
}).
when('/:tipusactius/alta', {
templateUrl: 'tipusactius-alta.html',
controller: 'AfegirTipusActiusCtrl'
}).
otherwise({
redirectTo: '/'
});
});
assets.controller('TipusActiusCtrl', function ($scope, $http){
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/').success(function(data) {
$scope.tipus_actius = data;
});
// Ordena taula per id desc
$scope.sortField = 'idtipus_actius';
$scope.reverse = false;
});
assets.controller('AfegirTipusActiusCtrl', function ($scope, $http){
// Camps formulari text pla
$scope.nomAtribut = "<input type='text' name='firstname'>";
$scope.mida = "<input type='number' name='firstname'>";
$scope.obligatori = "<input type='checkbox' name='vehicle' value='yes'>";
// Construeix combo
$http.get('http://10.0.203.73/WS/ws.php/getCombo/1').success(function(data) {
$scope.options = data;
});
$scope.atributs = [];
$scope.addField = function() {
$scope.atributs.push($scope.atributs.length);
};
$scope.prioritat = $scope.atributs.length;
});
assets.directive('compile', compile);
function compile($compile)
{
return {
restrict: 'A',
replace: true,
link: linkFunction
};
function linkFunction(scope, element, attrs)
{
scope.$watch(
function (scope)
{
return scope.$eval(attrs.compile);
},
function (value)
{
element.html(value);
$compile(element.contents())(scope);
}
);
}
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-view></div>
</body>
</html>
And this is the view where the table is(tipusactius-alta):
<div class="row">
<div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
<button ng-click="addField()">Nou atribut</button>
<div>
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td compile="nomAtribut"></td>
<td>
<select id="tipus">
<option ng-repeat="option in options" value="{{option.idvalors_combo}}">{{option.valor}}</option>
</select>
</td>
<td compile="mida"></td>
<td>
<select id="prioritat">
<option ng-repeat="p in prioritat" value="{{p}}">{{p}}</option>
</select>
</td>
<td compile="obligatori"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
I'm not sure if this has been a good idea. I would like to find a way to iterate over the rows to read cell values, and if the values of all cells from all the rows is ok submit the values to the web service but I have no idea. Any help will be great.
You don't actually need to manipulate html directly. Just use ng-repeat over your data collection. Button should add new items to that collection and angular will create new table row in the document.
I've created small sample here: http://jsfiddle.net/Lvc0u55v/252/
var myApp = angular.module('myApp', []);
myApp.controller('tableCtrl', function($scope) {
$scope.dataTable = [{
"name": "Alex",
"lastName": "Karlov",
"age": 23,
"sex": 1
}];
$scope.options = [{
"value": 1,
"title": "Male"
}, {
"value": 2,
"title": "Female"
}];
$scope.addRow = function() {
var newItem = {
name: "",
lastName: "",
age: "",
sex: ""
}
$scope.dataTable.push(newItem);
};
});
And this is the html (I've created it based on yours code):
<div class="col-md-8" ng-controller="tableCtrl">
<button ng-click="addRow()">Add row</button>
<div>
<table class="table">
<tr>
<td>#</td>
<td>Name</td>
<td>Last Name</td>
<td>Age</td>
<td>Sex</td>
</tr>
<tr ng-repeat="item in dataTable">
<td>{{ $index + 1 }}</td>
<td>
<input type="text" ng-model="item.name" />
</td>
<td>
<input type="text" ng-model="item.lastName" />
</td>
<td>
<input type="text" ng-model="item.age" />
</td>
<td>
<select ng-options="option.value as option.title for option in options" ng-model="item.sex"></select>
</td>
</tr>
</table>
</div>
</div>
In that sample I've put all my data into dataTable variable. When I want to add one more row, I just need to add new empty object (or with predefined values) into dataTable collection. Angular will do the trick.