Develop Reference

why is ng-model not checking default radio button?

Below is the fiddle i am working:
http://jsfiddle.net/3c0dxf4d/
The ng-model has an object and the ng-value maps to object, why is my default value {"id":1,"name":"Bill"}
not getting selected by default.

Check out this fiddle http://jsfiddle.net/roz98eda/
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.customers = [{
"id": 1,
"name": "Bill"
}, {
"id": 2,
"name": "Bob"
}, {
"id": 3,
"name": "Biff"
}];
$scope.customer = {};
$scope.currentCustomer = {
"id": 1
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<table>
<tr ng-repeat="theCustomer in customers">
<td>
<input type="radio" ng-model="$parent.currentCustomer.id" ng-value="theCustomer.id">{{theCustomer.name}}</td>
</tr>
</table>
<br>
<div>{{currentCustomer}}</div>
</div>
</div>

Because you've put the initial value to
$scope.currentCustomer = {
"id": 1,
"name": "Bill"
};
Just remove or change it.
Please check following code please.
app.controller("ctrl", function ($scope) {
$scope.customers = [{
"id": 1,
"name": "Bill"
}, {
"id": 2,
"name": "Bob"
}, {
"id": 3,
"name": "Biff"
}];
$scope.customer = {};
*$scope.currentCustomer = {
"id": 1,
"name": "Bill"
};*
})

Change
<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">
To
<input type="radio" ng-model="$parent.currentCustomer.id" name="foo" ng-value="theCustomer.id" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
From ng-value docs
It is mainly used on input[radio] and option elements, so that when
the element is selected, the ngModel of that element (or its select
parent element) is set to the bound value.

Add Hardcoded row to AngularJS tableoptions

I'm new to angular and I have a page that will be using dtable. The table will be built in my controller but for the time being I want to add some hardcode rows until I am ready to populate my table with valid details but I have no idea how to do this.
HTML
<dtable class="full-height material"
style="height: 555px"
options="vm.tableoptions"
rows="vm.adviseraccess">
</dtable>
Controller
var vm = this;
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
};
I tried seeing if adding items to my tableoptions would work as shown below but it doesn't
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
items:
[
{
"name": "One"
}
{
"name": "Two"
}
]
};
And I also tried the following
vm.adviseraccess = [
{
name: "Antony"
},
{
name: "Bob"
},
{
name: "Will"
}
];

Try Like This
<div ng-controller="AngularWayCtrl as showCase">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in showCase.persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</div>
Controller
angular.module('showcase.angularWay', ['datatables', 'ngResource'])
.controller('AngularWayCtrl', AngularWayCtrl);
function AngularWayCtrl($resource) {
var vm = this;
vm.persons=[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}];
}
for more Details please Refer this Link Angular-dataTables

ng-options will not pre-select an option

I am using angular's ng-options to populate the html with the names of people. I want it to pre-select the value that I have set as the ng-model (registrantSelected). But for some reason, it won't do so.
I have looked up various different documentations for ng-options and looked at a bunch of other stack overflow posts about ng-options, but I can't seem to figure out what I am doing wrong.
Code can be found in this plunker or below:
Javascript:
angular.module('app', [])
.controller("MainController", ["$scope", function($scope) {
$scope.paidDuesCompanyPeople = [{
"FirstName": "Person",
"LastName": "One",
"MemberType": {
"IsMember": false,
"Name": "Non-member"
}
}, {
"FirstName": "Second",
"LastName": "Person",
"MemberType": {
"IsMember": true,
"Name": "Member"
}
}, {
"FirstName": "Three",
"LastName": "People",
"MemberType": {
"IsMember": false,
"Name": "Non-member"
}
}];
$scope.registrantSelected = {
"FirstName": "Person",
"LastName": "One",
"MemberType": {
"IsMember": false,
"Name": "Non-member"
}
};
}]);
HTML:
<div ng-app="app" ng-controller="MainController">
<div class="col-xs-12 col-sm-5">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label">Registration for</label>
<div class="col-sm-6">
<select class="form-control" ng-model="registrantSelected" ng-options="person.FirstName + ' ' + person.LastName for person in paidDuesCompanyPeople">
</select>
</div>
</div>
</form>
</div>
{{registrantSelected}}
</div>
Thank you for any help you can give!

You could do this thing by introducing track by in your ng-options but for having track by you should have unique property over there. I'd highly recommnd you to add Id property so that would make each record unique & you can track by the same. But for now just for demonstration you can track it by person.FirstName + person.Lastname(you will have track by person.Id when you add id)
<select class="form-control"
ng-model="registrantSelected"
ng-options="person.FirstName + ' ' + person.LastName for person in paidDuesCompanyPeople track by person.FirstName + person.Lastname ">
</select>
Demo Here

You should be able to set it in the controller, like so...
$scope.registrantSelected = $scope.paidDuesCompanyPeople[0];
Which makes your controller look like this (drop it in your plunkr)
Edit: I have added a plunkr as requested http://plnkr.co/edit/r8XAWqBheAATwc8zXGSY?p=preview
angular.module('app', [])
.controller("MainController", ["$scope", function($scope) {
$scope.paidDuesCompanyPeople = [{
"FirstName": "Person",
"LastName": "One",
"MemberType": {
"IsMember": false,
"Name": "Non-member"
}
},{
"FirstName": "Second",
"LastName": "Person",
"MemberType": {
"IsMember": true,
"Name": "Member"
}
},{
"FirstName": "Three",
"LastName": "People",
"MemberType": {
"IsMember": false,
"Name": "Non-member"
}
}];
$scope.registrantSelected = $scope.paidDuesCompanyPeople[0];
}]);
if you want to do it in the view,
<select ng-model="registrantSelected"
ng-options="person.FirstName + ' ' + person.LastName for person in paidDuesCompanyPeople"
ng-init="registrantSelected=paidDuesCompanyPeople[0]"></select>

change registrantSelected value to this:
$scope.registrantSelected = $scope.paidDuesCompanyPeople[0];
in javascript every two objects are the same only if both of them are referring to same object:
var x1 = { id : 1 };
var x2 = { id : 1 };
console.log(x1 == x2); // false
var y1 = { id : 1 };
var y2 = y1;
console.log(y1 == y2); // true

CRUD issue while edit and save from table using angularjs

When i tried to click the edit radio button the details will be displayed in the concerned boxes but the existing details in the table is deleted. Here my requirement is to use single array/scope variable for edit, display and delete. But no use for loop while edit/delete. Here i done the changes but no proper way of work. my html index.html as follows
<div ng-controller="employeeController">
<header><h1>Employee Details</h1></header>
<form name="myForm" novalidate>
<table id="myTable" cellspacing="0" cellpadding="4">
<tr>
<td><label> Employee Id </Label></td>
<td><input type="text" name="eid" data-ng-model="employees.EmployeeId" data-ng-required="true" ng-disabled="newEmployees"/></td>
</tr>
<tr>
<td><label> FirstName </Label></td>
<td><input type="text" name="fname" data-ng-model="employees.FirstName" data-ng-required="true"/></td>
</tr>
<tr>
<td><label> LastName </Label></td>
<td><input type="text" name="lname" data-ng-model="employees.LastName" data-ng-required="true"/></td>
</tr>
<tr>
<td><label> Gender </Label></td>
<td>
<input type="radio" name="gender" data-ng-change="employees.Gender" value ="Male" data-ng-model="employees.Gender"/> Male
<input type="radio" name="gender" data-ng-change="employees.Gender" value ="Female" data-ng-model="employees.Gender"/>Female
</td>
</tr>
<tr>
<td><label> Email </Label></td>
<td><input type="text" name="email" data-ng-model="employees.Email" data-ng-required="true"/></td>
</tr>
<tr>
<td><label> Account </Label></td>
<td><input type="text" name="account" data-ng-model="employees.Account" data-ng-required="true"/></td>
</tr>
<tr>
<td><input type="hidden" data-ng-model="employees.EmployeeId"></td>
</tr>
</table>
<button name="btnSave" data-ng-click="saveEmployeeRecord(employees)" class="userbutton">Save</button>
<button name="btnReset" data-ng-click="resetEmployeeRecord()" class="userbutton">Reset</button>
</form>
<table border="2" cellspacing="0" cellpadding="4">
<tr style="color: blue">
<th style="width:100px">Employee Id</th>
<th style="width:150px">FirstName</th>
<th style="width:150px">LastName</th>
<th style="width:90px">Gender</th>
<th style="width:150px">Email</th>
<th style="width:60px">Account</th>
<th>Action</th>
</tr>
<tr style="color:green" data-ng-repeat="emp in employees">
<td>{{emp.EmployeeId}}</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
<td>{{emp.Gender}}</td>
<td>{{emp.Email}}</td>
<td>{{emp.Account}}</td>
<td>
<input type="radio" name="process" data-ng-click="editEmployee(emp, employees.indexOf(emp))"> Edit
<input type="radio" name="process" data-ng-click="DeleteEmployee(employees.indexOf(emp))"> Delete
</td>
</tr>
</table>
</div>
javascript app.js
var employeeApp = angular.module("myApp",[]);
employeeApp.controller("employeeController", function($rootScope, $scope, $http) {
$http.get('data/employees.json').success(function(data) {
$rootScope.employees = data;
});
var empId = 12342;
$rootScope.saveEmployeeRecord = function(emp) {
if($rootScope.employees.EmployeeId == null) {
$rootScope.employees.EmployeeId = empId++;
$rootScope.employees.push(emp);
}
else {
for(i in $rootScope.employees) {
if($rootScope.employees[i].EmployeeId == emp.EmployeeId) {
$rootScope.employees[i]= emp;
}
}
}
//$rootScope.employees = {};
}
$rootScope.resetEmployeeRecord = function() {
angular.copy({}, $rootScope.employees);
}
$rootScope.editEmployee = function(emp, indx) {
//$rootScope.emp = $rootScope.employees;
if($rootScope.employees[indx].EmployeeId == emp.EmployeeId) {
$rootScope.employees = angular.copy($rootScope.employees[indx]);
}
}
$rootScope.DeleteEmployee = function(idx) {
var result = confirm("Are you sure want to delete?");
if (result) {
$rootScope.employees.splice(idx,1);
return true;
}
else {
return false;
}
//for(i in $rootScope.employees) {
//if($rootScope.employees[i].EmployeeId == idx) {
//$rootScope.employees = {};
//}
//}
}
});
employees.json file:
[
{
"EmployeeId": "61234",
"LastName": "Anderson",
"FirstName": "James",
"Gender": "Male",
"Email": "james_anderson#infosys.com",
"Account": "Boeing"
},
{
"EmployeeId": "512458",
"LastName": "Cambell",
"FirstName": "Mike",
"Gender": "Male",
"Email": "mike.cambell#infosys.com",
"Account": "Boeing"
},
{
"EmployeeId": "712785",
"LastName": "Swachengar",
"FirstName": "Andrew",
"Gender": "Male",
"Email": "andrew.swachengar#infosys.com",
"Account": "Cisco"
},
{
"EmployeeId": "712734",
"LastName": "Anderson",
"FirstName": "James",
"Gender": "Male",
"Email": "james.anderson#infosys.com",
"Account": "Apple"
},
{
"EmployeeId": "61245",
"LastName": "Green",
"FirstName": "Rachael",
"Gender": "Female",
"Email": "rachael_green#infosys.com",
"Account": "Boeing"
},
{
"EmployeeId": "61347",
"LastName": "Brown",
"FirstName": "Jackualine",
"Gender": "Female",
"Email": "jackualine_brown#infosys.com",
"Account": "Boeing"
}
]

You need to assign the selected item to a model which you have to associate in your edit/save form. And then when "save" is clicked, you need to update the original data with the updated data. Here's an example of how that would work:
$rootScope.saveEmployeeRecord = function() {
for(k in $scope.selectedEmployee){
$scope.selectedEmployee[k] = $scope.selectedEmployeeCopy[k];
}
}
$rootScope.resetEmployeeRecord = function() {
$rootScope.selectedEmployeeCopy = null;
}
$rootScope.editEmployee = function(emp) {
$rootScope.selectedEmployee = emp;
$rootScope.selectedEmployeeCopy = angular.copy($rootScope.selectedEmployee);
}
Here, I am making a copy of your original employee, and updating the copy. When saved, the copy will replace the original employee. When cancelled, it will be simply ignored. Here's a working fiddle based on your code.
Edit: based on feedback, updated the save and delete method which were not working as expected. Also updated the jsFiddle.
Edit2: Removed for loops and relpaced with passing array index
$rootScope.saveEmployeeRecord = function() {
$rootScope.employees.splice($rootScope.selectedIndex, 1,$rootScope.selectedEmployeeCopy);
}
$rootScope.resetEmployeeRecord = function() {
$rootScope.selectedEmployeeCopy = null;
$rootScope.selectedIndex = null;
}
$rootScope.editEmployee = function(emp, ind) {
$rootScope.selectedIndex = ind;
$rootScope.selectedEmployee = emp;
$rootScope.selectedEmployeeCopy = angular.copy($rootScope.selectedEmployee);
}
$rootScope.DeleteEmployee = function(emp, ind) {
var result = confirm("Are you sure want to delete?");
if (result) {
$rootScope.employees.splice(ind, 1);
$rootScope.selectedEmployeeCopy = null;
$rootScope.selectedIndex = null;
return true;
}
else {
return false;
}
}

You can Pass id as like this with your index in your radio button.
<button class="btn btn-default" ng-click="editBook(add.id, $index);" type="submit">Edit</button>
See my controller:
$scope.editBook = function(id,index) {
$scope.show1=false;
$scope.show=true;
$http.get(appurl + 'user/adds/' + id + '.json')
.success(function(data, status, headers, config) {
$scope.user= data;
angular.copy($scope.user, $scope.copy);
});
};

How to add elements from a JSON array to a grid using Angular.js

I have a JSON array in a file data.json which is as :
var info = [{
"place": "Turkey",
"username": "jhon"
}, {
"place": "Dubai",
"username": "bruce"
}, {
"place": "Italy",
"username": "Wayne"
}];
I am able to access these using a loop and check with the help of an alert box.. However, I wish to display the contents in the form of a table. I could use JavaScript or as somebody suggested to me I could also use Angular.js. Any idea on what way I could get along with will be easier?

if you going to use angular just for displaying the JSON as a table, then it would be a overkill.
you can do it in plain javascript itself easily.
We can create each cell of the table with javascript and append it into a table dynamically.
function showInfo() {
var table = document.getElementById('info');
info.forEach(function(obj) {
var row = document.createElement('tr'),
col1 = document.createElement('td'),
col2 = document.createElement('td'),
place = document.createTextNode(obj.place),
username = document.createTextNode(obj.username);
col1.appendChild(place);
col2.appendChild(username);
row.appendChild(col1);
row.appendChild(col2);
table.appendChild(row);
});
document.body.appendChild(table);
}
Here is the sample fiddle
Update
seems forEach is not supported in IE. here is another version which uses for loop instead of forEach construct
function showInfo() {
var table = document.getElementById('info');
for (var i=0; i< info.length; i++) {
var obj = info[i],
row = document.createElement('tr'),
col1 = document.createElement('td'),
col2 = document.createElement('td'),
place = document.createTextNode(obj.place),
username = document.createTextNode(obj.username);
col1.appendChild(place);
col2.appendChild(username);
row.appendChild(col1);
row.appendChild(col2);
table.appendChild(row);
}
document.body.appendChild(table);
}
Here is the updated sample fiddle

You can import the data with a script tag:
<script src="data.json"></script>
And then use angularjs to display the data:
<script>
angular.module('mainApp', [])
.controller('mainCtl', function($scope) {
$scope.info = info;
});
</script>
<div ng-app="mainApp" ng-controller="mainCtl">
<table border="1" width="300">
<tr><td>Place</td><td>Username</td></tr>
<tr ng-repeat="n in info">
<td>{{n.place}}</td>
<td>{{n.username}}</td>
</tr>
</table>
</div>
http://jsfiddle.net/hdbu1ffs/

Here is how you could accomplish this with Angular, and here is a working plunker of the code below:
data.json
[
{
"place": "Turkey",
"username": "jhon"
},
{
"place": "Dubai",
"username": "bruce"
},
{
"place": "Italy",
"username": "Wayne"
}
]
Controller
app.controller('MainCtrl', function($scope, $http) {
$scope.info = null;
$http.get("data.json").success(function (data) {
$scope.info = data;
});
});
View
<body ng-controller="MainCtrl">
<table>
<tr>
<th>Place</th>
<th>Username</th>
</tr>
<tr ng-repeat="thing in info">
<td>{{thing.place}}</td>
<td>{{thing.username}}</td>
</tr>
</table>
</body>

you can solve easily by using angularjs:
in data.json:
[
{
"place": "Turkey",
"username": "jhon"
},
{
"place": "Dubai",
"username": "bruce"
},
{
"place": "Italy",
"username": "Wayne"
}
]
Controller:
angular.module('app', []).controller('SolutionController', ['$scope', '$http',
function($scope, $http) {
$http.get("data.json").then(function(infos) {
$scope.infos = infos;
}, function(error) {
$scope.infos = null;
});
}
]);
and view:
<body ng-controller="SolutionController">
<table>
<tr>
<th>Place</th>
<th>User Name</th>
</tr>
<tr data-ng-repeat="info in infos">
<td data-ng-bind="info.place"></td>
<td data-ng-bind="info.username"></td>
</tr>
</table>
</body>