We Keep Coding

how to get all data using select all checkbox in table?

Hi I am trying to get all data at a time when I will click on
checkbox, but data not coming but when i click one by one data id
coming. But my problem is how to get all data in checkbox all in
single click.
This is HTML code
<div id="wrapper" class="wrapper">
<div ng-include="'views/partials/navigator.html'"></div>
<div class="page-content-wrapper">
<div ng-include="'views/partials/header.html'"></div>
<div class="row">
<div class="col-md-12">
<h3>Student Information</h3>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" id="slctAllDuplicateStd"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class ="button" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
This is javascript code
(function() {
angular
.module('vidyartha-coordinator')
.controller('StudentDuplicateAccountController', StudentDuplicateAccountController);
StudentDuplicateAccountController.$inject = ['$scope', 'ApiService', '$routeParams', '$http', '$location', '$timeout'];
function StudentDuplicateAccountController($scope, ApiService, $routeParams, $http, $location, $timeout) {
var vm = this;
//console.log($routeParams)
var page = $routeParams.page || 1;
// vm.data = [];
ApiService.getAll('student-duplicate-account?pageCount=5&pageNumber=' + page).then(function(response) {
//console.log("response::"+JSON.stringify(response));
vm.data = response.data.records;
vm.pageNumber = response.data.pageNumber;
vm.totalRecords = response.data.totalRecords;
vm.pageCount = response.data.pageCount;
$scope.renderpagination = true;
});
$("#slctAllDuplicateStd").click(function () {
$(".duplicateRow").prop('checked', $(this).prop('checked'));
// console.log('data:::'+JSON.stringify(data));
});
vm.process = function() {
vm.duplicateArray = [];
angular.forEach(vm.data, function(data){
if (data.selected) {
console.log("true")
vm.duplicateArray.push(data.tenantId);
vm.duplicateArray.push(data.mobileNumber);
vm.duplicateArray.push(data.schoolId);
vm.duplicateArray.push(data.classId);
}
});
console.log(vm.duplicateArray)
}
}
})();
I need all data at a time we i do check and press process button.
So please tell me where i should add some condition.

Am not sure why you are mixing jquery here you can do it as follow
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
}
then in your checkbox
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>

Want to add users to an array and display it dynamically in a table using angular and javascript

I'm a beginner at javascript and angularjs and was recently coding to display all the users in my array in a table and have them update dynamically as I add more users through a form... however when I run my code all I get is "Fill out the entire form!". I was hoping you guys could tell me what I am doing wrong (most importantly) and how I could fix it.
Thanks!
My HTML:
<table>
<tr>
<td colspan="5" class="align-center"><input type="text" placeholder="Search Users" class="search-users" ng-click="userSearch"/></td>
</tr>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" id="formFaction" /></td>
</tr>
<tr>
<td colspan="4" class="align-right error-field" id="errorField"></td>
<td colspan="1" class="align-right"><button type="button" class="add-user" ng-click="addUser()"/> Add </button></td>
</tr>
</table>
My Javascript/Angular:
$scope.jsFirstName = document.getElementById('formFirstName').value;
$scope.jsLastName = document.getElementById('formLastName').value;
$scope.jsRace = document.getElementById('formRace').value;
$scope.jsClass = document.getElementById('formClass').value;
$scope.jsFaction = document.getElementById('formFaction').value;
$scope.jsID = users.length;
$scope.addUser = function () {
$scope.character = {};
$scope.character.id = $scope.jsID+1;
$scope.character.firstName = $scope.jsFirstName;
$scope.character.lastName = $scope.jsLastName;
$scope.character.faction = $scope.jsFaction;
$scope.character.class = $scope.jsClass;
$scope.character.race = $scope.jsRace;
if ($scope.jsFirstName.length === 0 || $scope.jsLastName.length === 0 || $scope.jsFaction.length === 0 || $scope.jsClass.length === 0 || $scope.jsRace.length === 0) {
document.getElementById('errorField').innerHTML = "Fill out the entire form!";
} else {
users.push(character);
}
};
});

As you are using AngularJS, you should use ng-model directive to pass the data from the view to controller instead of doing it manually using Javascript. So, you should never use document.getElementById within a controller.
These changes you have to made in your code :
add ng-model directive in each input type.
pass all the form data inside an object using ng-model.
Ex :
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
Here, I created user object and then we can pass this whole object using ng-click="addUser(user)".
Working demo :
var app = angular.module('myApp',[]);
app.controller('userController',function($scope) {
$scope.usersData = [];
$scope.addUser = function(user) {
$scope.usersData.push(user);
$scope.user = {};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userController">
<table>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" ng-model="user.formLastName" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" ng-model="user.formRace" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" ng-model="user.formClass" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" ng-model="user.formFaction" id="formFaction" /></td>
</tr>
<tr>
<td colspan="1" class="align-right">
<input type="button" class="add-user" ng-click="addUser(user)" value="Add User"/>
</td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Race</td>
<td>Class</td>
<td>Faction</td>
</tr>
<tr ng-repeat="users in usersData">
<td>{{users.formFirstName}}</td>
<td>{{users.formLastName}}</td>
<td>{{users.formRace}}</td>
<td>{{users.formClass}}</td>
<td>{{users.formFaction}}</td>
</tr>
</table>
</div>

Since you use angular, you should not do what you do.
Let's take an exemple out of your code : FirstName :
<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Others like this -->
<td ng-bind="errorField"></td>
<!-- OR INSTEAD -->
<td>{{errorField}}</td>
Now you should have a controller, right ? So, in your controller, you can do this :
$scope.addUser = function() {
$scope.character = {};
$scope.character.firstName = $scope.firstName;
// Others like this
if($scope.firstName === "") { // More conditions
$scope.errorField="Please fill out the form";
}
}
This is why Angular has been made.

If you are using angular use 2 way data binding. Add ng-modal="fromFirstName" .... Etc to your inputs . In your controller set up local variable like var firstname = $scope.formFirstName . As it's 2 way data binding in real time you views and models are changed. When the user clicks the button you can check for emptiness. Hope this helps

Try using the bellow
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myusersList", []);
app.controller("myCtrl", function($scope) {
$scope.users = [{fname:"sj",lname:"rao",class:"10"},{fname:"fvsdf",lname:"sdf",class:"1120"}];
$scope.addUser = function () {
var newUser = {};
newUser.fname=$scope.fname;
newUser.lname=$scope.lname;
newUser.class=$scope.class;
$scope.users.push(newUser);
}
});
</script>
<div ng-app="myusersList" ng-controller="myCtrl">
<ul>
<li ng-repeat="data in users">First Name : {{data.fname}} last Name : {{data.lname}} class : {{data.class}}</li>
</ul>
<input ng-model="fname">
<input ng-model="lname">
<input ng-model="class">
<button ng-click="addUser()">Add</button>
</div>
<p>Write in the input field to add users.</p>
</body>
</html>

Selectpicker doesn't show inside a table column

I have a table of movies and I am using ng-repeat to display the rows. But each column shows the movie variable (like name, director, actor, year..) and one of then is the genre but the movie can have multiple genres. So, I am using a select to do this.
The problem is, my select just don't show up in the screen! I don't know if this is a angular problem or I am doing something wrong..
Here is my table:
<div class="container" style="margin-top: 30px; min-width: 90%" ng-controller="adminController">
<table class="table table-hover">
<thead>
<tr>
<th>
<h2>Filme</h2>
</th>
<th>
<h2>Ano</h2>
</th>
<th>
<h2>Diretor</h2>
</th>
<th>
<h2>Ator/Atriz</h2>
</th>
<th>
<h2>Pontuação</h2>
</th>
<th>
<h2>Generos</h2>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" ng-model="novoFilme.nome" placeholder="Nome do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.ano" placeholder="Ano do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.diretor" placeholder="Diretor do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.ator" placeholder="Ator/atriz do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.pontuacao" placeholder="Pontuação do filme"/></td>
<td>
<select class="selectpicker" title="Nenhum selecionado" ng-model="novoFilme.generos" ng-options="genero.value as genero.nome for genero in generos" multiple>
</select>
</td>
<td style="text-align: right"><button class="btn btn-primary" ng-click="addFilme()">Adicionar Filme</button></td>
</tr>
<tr ng-repeat="filme in filmes">
<td><input class="form-control" ng-model="filme.nome"/></td>
<td><input class="form-control" ng-model="filme.ano"/></td>
<td><input class="form-control" ng-model="filme.diretor"/></td>
<td><input class="form-control" ng-model="filme.ator"/></td>
<td><input class="form-control" ng-model="filme.pontuacao"/></td>
<td>
<select class="selectpicker" title="Nenhum selecionado" ng-options="genero.value as genero.nome for genero in generos" multiple>
</select>
</td>
<td style="text-align: right"><button class="btn btn-danger" ng-click="remove(filme._id)">Remover</button></td>
</tr>
</tbody>
</table>
</div>
Here is my controller:
app.controller('adminController', function ($scope, $http) {
$scope.generos = [
{
nome: "Comédia",
value: "Comédia"
},
{
nome: "Comédia Romântica",
value: "Comédia Romântica"
},
{
nome: "Drama",
value: "Drama"
},
{
nome: "Ação",
value: "Ação"
},
{
nome: "Policial",
value: "Policial"
},
{
nome: "Suspense",
value: "Suspense"
},
{
nome: "Terror",
value: "Terror"
}
];
var atualizar = function () {
$http.get('/filmes').success(function (response) {
$scope.filmes = response;
$scope.novoFilme = "";
});
};
atualizar();
$scope.addFilme = function () {
$http.post('/filmes', $scope.novoFilme).success(function (response) {
atualizar();
});
};
$scope.remove = function (id) {
$http.delete('/filmes/' + id).success(function (response) {
atualizar();
});
};
$scope.save = function () {
for (i = 0; i < $scope.filmes.length; i++) {
$http.put('/filmes/' + $scope.filmes[i]._id, $scope.filmes[i]).success(function (response) {
atualizar();
});
}
};
});
Anyone knows how to fix it or any ideas how to do this in a different way?
Edit:
Here is the screen shot:
http://imgur.com/a/bXgBK

Well, ngOptions requires ngModel directive, so you have to use it in your <select> tag.
If you look at your console (pressing F12) you'll see this error:
Controller 'ngModel', required by directive 'ngOptions', can't be
found!
So, Instead of:
<select class="selectpicker" title="Nenhum selecionado"
ng-options="genero.value as genero.nome for genero in generos" multiple>
Use:
<select ng-model="genero" class="selectpicker" title="Nenhum selecionado"
ng-options="genero.value as genero.nome for genero in generos" multiple>
Tip: Always look at your console (F12) to see the errors when something went wrong.

I found that the problem is just the select class, in this case class="selectpicker", I don't know why this is causing issue, but if you remove this class will work fine.
Just to know, this class is a class from Silvio Moreto bootstrap select that you can find in the link below.
https://silviomoreto.github.io/bootstrap-select/

How can I change the innerHTML of div with a variable, inside the scope function in angular js?

I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}

You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>

Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}

Avoiding duplicate index in columns in table when using ng-repeat

Below is my plunker in which I'm tring to display the output types based on different months.I want to save the maximum capacity for each month on click of save button by getting all the values in an array.But when I type in a text box the value gets repeated as the index is repeated column wise.
ng-repeat in table
Below is the code:
JavaScript:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.outputType=["Coal","ROM","WASTE"];
$scope.months=["JAN","FEB","MARCH","APRIL"];
$scope.values = [];
$scope.save=function(){
alert($scope.values)
}
});
HTML:
<table style="border:1px solid red;">
<thead>
<tr>
<th> </th>
<th ng-repeat="i in months"><b>{{i}}</b></th>
</tr>
</thead>
<tbody ng-repeat="item in outputType">
<tr>
<td>{{item}} </td>
<td ng-repeat="i in months">
<input type="text" ng-model="values[$index]"
placeholder="Max.Capacity">
</td>
</tr>
</tbody>
</table>

Check that http://plnkr.co/edit/4DUDIBoTOCI4J89FiQeM?p=preview
JS
$scope.values = {};
HTML
<input type="text" ng-model="values[item][i]" placeholder="Max.Capacity">
or
<input type="text" ng-model="values[i][item]" placeholder="Max.Capacity">

Solution if you want to leave an array.
You need to change your ngModel in input
<input type="text" ng-model="values[$index]" placeholder="Max.Capacity">
to
ng-model="values[$parent.$index][$index]".
Here is an example:
Example