I am new to angularjs ,i want to bind edit data on modal then submit it.
my controller.js
.controller("registration_listCtrl", ["$scope", "$http", function
($scope, $http) {
$scope.editlist = function(id){
$http({
method:'post',
url:'http://localhost/Angular_demo/admin/index.php/welcome/get_edit_data/'+ id
}).then(function success(response){
$scope.sid = parseInt(response['id']);
$scope.firstname = response["first_name"];
$scope.lastname = response['last_name'];
$scope.email = response['email'];
});
}
$scope.getUsers();
}])
When i click on edit button in table data will return on console but not bind in my modal.My return data is
0:
{id: "1", first_name: "dipti", last_name: "ranjan", email: "uiouio#ytry.yuy", password: "12345"}
But when i print response["first_name"] in console it shows undefined
Here is best practice for your question:
<!doctype html>
<html ng-app="crudapp">
<head>
<meta charset="UTF-8">
<title>AngularJS and CRUD</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-controller="registration_listCtrl">
<!-- Table to output data -->
<table cellpadding="5" cellspacing="0" border="1">
<thead>
<tr>
<th>AngularJS ID</th>
<th>SKU CODE</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>QUANTITY</th>
<th>OPTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in listProducts">
<td>{{product.id = $index}}</td>
<td>{{product.sku}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.quantity}}</td>
<td>
DELETE
EDIT
</td>
</tr>
</tbody>
</table>
<h1>Product Information</h1>
<form name="commentForm" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<td>SKU</td>
<td>
<input type="text" ng-model="sku">
</td>
</tr>
<tr>
<td>Product Name</td>
<td>
<input type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Price</td>
<td>
<input type="text" ng-model="price">
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="text" ng-model="quantity">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Add" ng-click="add()">
<input type="button" value="Save" ng-click="edit()">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var crudapp = angular.module('crudapp', []);
crudapp.controller('registration_listCtrl', function($scope){
<!-- Populate table with products data -->
$scope.listProducts = [
{sku:'SKU1', name:'Product Name 1', price:199, quantity: 50},
{sku:'SKU2', name:'Product Name 2', price:220, quantity: 100},
{sku:'SKU3', name:'Product Name 3', price:55, quantity: 25},
{sku:'SKU4', name:'Product Name 4', price:100, quantity: 50},
{sku:'SKU5', name:'Product Name 5', price:10, quantity: 1000}
];
<!-- Delete function -->
$scope.del = function(id){
var result = confirm('Are you sure?');
if (result===true){
var index = getSelectedIndex(id);
$scope.listProducts.splice(index, 1);
};
};
<!-- Edit and update row function -->
$scope.edit = function(){
var index = getSelectedIndex($scope.id);
$scope.listProducts[index].sku = $scope.sku;
$scope.listProducts[index].name = $scope.name;
$scope.listProducts[index].price = $scope.price;
$scope.listProducts[index].quantity = $scope.quantity;
};
<!-- Select the row of data and update the form function -->
$scope.selectEdit = function(id){
var index = getSelectedIndex(id);
var product = $scope.listProducts[index];
$scope.id = product.id;
$scope.sku = product.sku;
$scope.name = product.name;
$scope.price = product.price;
$scope.quantity = product.quantity;
};
<!-- Add a new product function -->
$scope.add = function(id){
$scope.listProducts.push({
sku:$scope.sku,
name:$scope.name,
price:$scope.price,
quantity:$scope.quantity
});
<!-- Resets the form -->
$scope.sku = '';
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
};
<!-- Function finds unique product data based on its id -->
function getSelectedIndex(id){
for(var i=0; i<$scope.listProducts.length; i++)
if($scope.listProducts[i].id==id)
return i;
return -1;
};
});
</script>
</body>
</html>
Related
I trying to consume wcf(Rest) Service in Angular JS Application. My Wcf service is working fine but when I run my Application in Google Chrome it is unable to get the data from database and I also can do insert , update and delete operation. When I run the application its do not show any error but when I lunch developer tools i see following this errors.
?o=3&g=EC0825C4-90A4-2692-D257-CD2C2B565912&s=1A2C77E8-0498-4A11-B8B8-D740DBEC71C4&z=1403834305:2 Uncaught SyntaxError: Unexpected token <
Index:1 XMLHttpRequest cannot load http://localhost:50028/StudentService.svc/GetAllStudent. Redirect from 'http://localhost:50028/StudentService.svc/GetAllStudent' to 'http://localhost:50028/StudentService.svc/GetAllStudent/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
Here is My Angular JS Code ...
/// <reference path="../angular.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", []);
app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService) {
$scope.OperType = 1;
//1 Mean New Entry
GetAllRecords();
//To Get All Records
function GetAllRecords() {
var promiseGet = CRUD_AngularJs_RESTService.getAllStudent();
promiseGet.then(function (pl) { $scope.Students = pl.data },
function (errorPl) {
$log.error('Some Error in Getting Records.', errorPl);
});
}
//To Clear all input controls.
function ClearModels() {
$scope.OperType = 1;
$scope.StudentID = "";
$scope.Name = "";
$scope.Email = "";
$scope.Class = "";
$scope.EnrollYear = "";
$scope.City = "";
$scope.Country = "";
}
//To Create new record and Edit an existing Record.
$scope.save = function () {
var Student = {
Name: $scope.Name,
Email: $scope.Email,
Class: $scope.Class,
EnrollYear: $scope.EnrollYear,
City: $scope.City,
Country: $scope.Country
};
if ($scope.OperType === 1) {
var promisePost = CRUD_AngularJs_RESTService.post(Student);
promisePost.then(function (pl) {
$scope.StudentID = pl.data.StudentID;
GetAllRecords();
ClearModels();
}, function (err) {
console.log("Some error Occured" + err);
});
} else {
//Edit the record
debugger;
Student.StudentID = $scope.StudentID;
var promisePut = CRUD_AngularJs_RESTService.put($scope.StudentID, Student);
promisePut.then(function (pl) {
$scope.Message = "Student Updated Successfuly";
GetAllRecords();
ClearModels();
}, function (err) {
console.log("Some Error Occured." + err);
});
}
};
//To Get Student Detail on the Base of Student ID
$scope.get = function (Student) {
var promiseGetSingle = CRUD_AngularJs_RESTService.get(Student.StudentID);
promiseGetSingle.then(function (pl) {
var res = pl.data;
$scope.StudentID = res.StudentID;
$scope.Name = res.Name;
$scope.Email = res.Email;
$scope.Class = res.Class;
$scope.EnrollYear = res.EnrollYear;
$scope.City = res.City;
$scope.Country = res.Country;
$scope.OperType = 0;
},
function (errorPl) {
console.log('Some Error in Getting Details', errorPl);
});
}
//To Delete Record
$scope.delete = function (Student) {
var promiseDelete = CRUD_AngularJs_RESTService.delete(Student.StudentID);
promiseDelete.then(function (pl) {
$scope.Message = "Student Deleted Successfuly";
GetAllRecords();
ClearModels();
}, function (err) {
console.log("Some Error Occured." + err);
});
}
});
app.service("CRUD_AngularJs_RESTService", function ($http) {
//Create new record
this.post = function (Student) {
var request = $http({
method: "post",
url: "http://localhost:50028/StudentService.svc/AddNewStudent",
data: Student
});
return request;
}
//Update the Record
this.put = function (StudentID, Student) {
debugger;
var request = $http({
method: "put",
url: "http://localhost:50028/StudentService.svc/UpdateStudent",
data: Student
});
return request;
}
this.getAllStudent = function () {
return $http.get("http://localhost:50028/StudentService.svc/GetAllStudent");
};
//Get Single Records
this.get = function (StudentID) {
return $http.get("http://localhost:50028/StudentService.svc/GetStudentDetails/" + StudentID);
}
//Delete the Record
this.delete = function (StudentID) {
var request = $http({
method: "delete",
url: "http://localhost:50028/StudentService.svc/DeleteStudent/" + StudentID
});
return request;
}
});
})();
Here is HTML CODE ..
#{
Layout = null;
}
<!DOCTYPE html>
<html data-ng-app="RESTClientModule">
<head title="ASAS">
<title></title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/MyScripts/Modules.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="CRUD_AngularJs_RESTController">
<tr>
<td>
<table style="border: solid 2px Green; padding: 5px;">
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<th></th>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Class</th>
<th>Year</th>
<th>City</th>
<th>Country</th>
<th></th>
<th></th>
</tr>
<tbody data-ng-repeat="stud in Students">
<tr>
<td></td>
<td><span>{{stud.StudentID}}</span></td>
<td><span>{{stud.Name}}</span></td>
<td><span>{{stud.Email}}</span></td>
<td><span>{{stud.Class}}</span></td>
<td><span>{{stud.EnrollYear}}</span></td>
<td><span>{{stud.City}}</span></td>
<td><span>{{stud.Country}}</span></td>
<td>
<input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" />
</td>
<td>
<input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div style="color: red;">{{Message}}</div>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Student ID</span>
</td>
<td>
<input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Student Name</span>
</td>
<td>
<input type="text" id="sName" required data-ng-model="Name" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Email</span>
</td>
<td>
<input type="text" id="sEmail" required data-ng-model="Email" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Class</span>
</td>
<td>
<input type="text" id="sClass" required data-ng-model="Class" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Enrollement Year</span>
</td>
<td>
<input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>City</span>
</td>
<td>
<input type="text" id="sCity" required data-ng-model="City" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Country</span>
</td>
<td>
<input type="text" id="sCountry" required data-ng-model="Country" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="save" value="Save" data-ng-click="save()" />
<input type="button" id="Clear" value="Clear" data-ng-click="clear()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Here is My Screen Shot When I run the Application..
Any help would be great for me .Thanks
I am designing an application to do some CRUD operations related to the database. As part of my application i am trying to implement a search based on two inputs one is a dropdown/combo box and the other one is an input.
As soon as user enters finishes entering the text into the text then hit search , it should fetch all the information related to that particular record and populate that in the textboxes
Not able to handle the search with both the inputs. Any help is appreciated.
This is
var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
{ id: '100', name: "Macy", price: 200, quantity: 2 },
{ id: '100', name: "Macy", price: 100, quantity: 1 },
{ id: '101', name: "JCPenny", price: 400, quantity: 1 },
{ id: '102', name: "Primark", price: 300, quantity: 3 },
{ id: '103', name: "H&M", price: 600, quantity: 1 }
];
$scope.listProducts = listProducts;
$scope.del = function(id){
var txt = confirm("Are you sure??")
if (txt==true){
var index = getSelectedIndex(id);
$scope.listProducts.splice(index,1);
}
};
$scope.selectEdit = function(id){
var index = getSelectedIndex(id);
var product = $scope.listProducts[index];
$scope.id=product.id;
$scope.name=product.name;
$scope.price=product.price;
$scope.quantity=product.quantity;
};
// $scope.searchproduct= function(item){
// var product =
// }
function getSelectedIndex(id){
for(i=0; i<$scope.listProducts.length; i++)
if($scope.listProducts[i].id == id)
return i;
return -1;
}
});
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController">
ID:
<select ng-model=search>
<option ng-repeat="products in listProducts">{{products.id}}</option>
</select>
Quantity:
<input>
<div>
<button ng-click="selectEdit(search)">search</button>
</div>
<table>
<thead>
<tr>
<th>Edit Information </th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>
<input type="text" ng-model="id"/>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" ng-model="name"/>
</td>
</tr>
<tr>
<td>Price</td>
<td>
<input type="text" ng-model="price"/>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="text" ng-model="quantity"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="Add" />
<input type="button" value="Save"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Click here for my Plunker
https://plnkr.co/edit/KvVTvaCtPeFKJcPSnGYQ?p=preview
You need an object for the search parameters. You can store input from the combo in search.id and input from the text input in search.quantity
<select ng-model="search.id">
<option ng-repeat="products in listProducts">{{products.id}}</option>
</select>
Quantity:
<input type="text" ng-model="search.quantity">
In the selectEdit function you will filter by the search object.
$scope.selectEdit = function(){
var index = getSelectedIndex($scope.search);
...
}
And getSelectedIndex will look like this
function getSelectedIndex(search){
for(i=0; i<$scope.listProducts.length; i++)
if($scope.listProducts[i].id == search.id && $scope.listProducts[i].quantity == search.quantity)
return i;
return -1;
}
See the plunker
In the attached code snippet I want to calculate the total of Net Amount from all rows using AngularJS.
Your quick assistance in this regards will be highly appreciated.
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Add Rows</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MainController', ['$scope', '$http',
function ($scope, $http) {
$scope.rows = ['Row 1'];
$scope.counter = 3;
$scope.calculateTableSum = function (dQuantityIssued, dUnitPrice)
{
$scope.GrossTotal = dQuantityIssued * dUnitPrice;
}
//Adding Row
$scope.addRow = function () {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
//Removing Row
$scope.removeRow = function (rowIndex) {
$scope.rows.splice(rowIndex, 1);
}
} ]);
</script>
Add Row {{counter}}
<table border="1">
<thead>
<tr>
<th>
</th>
<th>
Product
</th>
<th>
Description
</th>
<th>
Qty Issued
</th>
<th>
Unit Price
</th>
<th>
Gross Total
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(rowIndex,rowContent) in rows">
<td>
<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(rowIndex)" />
</td>
<td>
<input type="text"></input>
</td>
<td>
<input type="text"></input>
</td>
<td>
<input ng-model="QtyIssued" type="number"/>
</td>
<td>
<input ng-model="UnitPrice" type="number" ng-change="calculateTableSum(QtyIssued,UnitPrice)" />
</td>
<td>
<input ng-model="GrossTotal" type="number" ng-bind="QtyIssued*UnitPrice" />
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<p>
Net Amount Total = {{NetAmount}}
</p>
Please go through this:
<table ng-controller="SubTotalCtrl">
<thead>
<tr><th ng-repeat="(key, th) in head">{{th}}</th></tr>
</thead>
<tbody>
<tr ng-repeat="row in body">
<td><input ng-model="row.a"></input></td>
<td><input ng-model="row.b"></input></td>
<td><input ng-model="row.c"></input></td>
</tr>
</tbody>
<tfoot>
<tr ng-repeat="(perc, sum) in grouppedByPercentage()">
<td></td>
<td><span>Subtotal for {{perc}}%</span></td>
<td>{{sum * perc / 100.0}}</td>
</tr>
</tfoot>
</table>
angular
.module('myApp', [])
.controller('SubTotalCtrl', function ($scope) {
// data
$scope.head = {
a: "Amount",
b: "Percent",
c: "Percent"
};
$scope.body = [{
a: "1000",
b: "5",
c: "10"
}, {
a: "2000",
b: "0",
c: "5"
}, {
a: "3000",
b: "10",
c: "20"
}];
$scope.grouppedByPercentage = function () {
var groups = {};
$scope.body.forEach(function (row) {
['b', 'c'].forEach(function (key) {
var perc = row[key];
if (perc === '0') { return; } // ignore 0 percentage
if (!groups[perc]) {
groups[perc] = 0;
}
groups[perc] += parseInt(row.a);
// use `parseFloat()` if you want decimal points
});
});
return groups;
};
});
http://jsfiddle.net/ExpertSystem/LD7QS/1/
It will answer all your questions.
How do you get the ng-click event to actually fire? I've tried everything to get this to work. I know the alert is working initially, but after the list is displayed, quite magically all the buttons fail to function.
Here is the display of the page (pre/post alert). I've verified that each button for details is getting a unique id. As you can see, I've also tried $parent (since some of the buttons are within a ng-repeat) as well as $rootscope to try to get things to execute (i.e. the detail buttons). It's almost as if, after the initially display, the page has lost the reference to the angularjs file since nothing functions:
When page is first displayed
After getting the data
Here's the AngularJS file:
var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
function ($scope, $http,$window) {
AngularInit();
function AngularInit() {
//This will be called once per form load, via the ng-load function on the div
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = 'Unknown';
$scope.gotdata = false;
DisplayList();
ShowAlert('test')
}
function GetAllEmployees($http) {
//$scope.Message = 'NULL';
//$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = 'OK';
$scope.gotdata = true;
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
$scope.gotdata = false;
}
);
//window.setTimeout(function () {
// $scope.gotdata = true;
//}, 1000);
};
function DisplayList() {
//call the web service to get the list of people
//set the display action so that the list will be displayed
GetAllEmployees($http)
$scope.DisplayAction = 'List';
};
function CreateNewEmployee() {
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = 'Create';
$scope.$apply();
};
function ShowDetails(id) {
//call the web service to get the details of the person
ShowAlert('test')
$scope.gotdata = false;
$http.get('http://localhost:65315/api/employee/' + id).then(function (response) {
$scope.employees = response.data;
$scope.DisplayAction = 'Details';
$scope.Message = 'OK';
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
}
);
//Set the $scope.CurrentEmployee
$scope.$apply();
};
function ShowAlert(msg)
{
$window.alert(msg);
}
function CreateEmployee() {
//perform the actual creation based on $scope.CurrentEmployee
//if successful
DisplayList();
};
function DeleteEmployee(id) {
$scope.DisplayAction = 'Delete';
$scope.$apply();
};
function DoDeleteEmployee(id) {
//Perform actual deletion
//if successful
DisplayList();
};
function EditEmployee(id) {
//get the employee based on ID
$scope.DisplayAction = 'Edit';
$scope.$apply();
};
function EditUpdate() {
//perform the actual update based on $scope.id
//if successful
DisplayList();
};
}
);
//angular.module('EmployeeApplication', [])
// .controller('EmployeeController', ['$scope', '$window', function ($scope, $window) {
// $scope.greeting = 'Hello, World!';
// $scope.doGreeting = function (greeting) {
// $window.alert(greeting);
// };
// }]);
var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http)
{
$scope.MadeItHereMessage = 'We made it to the controller (first controller)';
$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = "OK";
},
function (err)
{
$scope.Message = "Call failed" + err.status + " " + err.statusText;
}
);
});
//var app = angular.module("MyModule", []).controller("MyController", function initController($scope)
//{
// $scope.MadeItHereMessage = 'This is a loadtest';
//});
//var app = angular.module("EmployeeApplication", ['$rootscope','$scope','$http'])
//.controller("EmployeeController",
// function AppCtrl($rootscope,$scope, $http)
// {
// $scope.DisplayAction = "List";
// }
//);
//var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http) {
// $http.get('EmployeeWebService.asmx/GetAllEmployees').then(function (response) {
// $scope.employees = response.data;
// }
// );
//});
Here is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/EmployeeAngular.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="EmployeeApplication">
<div ng-controller="EmployeeController" ng-init="AngularInit()">
{{Message}}
<br/>
{{DisplayAction}}
<button id="btnCreateNew1" ng-click="$parent.ShowAlert('Parent scope button pressed')">Show message from parent scope</button>
<br />
<!--The following is for listing the entire list of employees-->
<div id="listSection" ng-show="DisplayAction=='List'">
<!--The employees data is: {{employees}}-->
<!--<div id="listSection">-->
<table>
<thead>List of defined Employees</thead>
<tr>
<!--<td><button id="btnCreateNew" ng-click="CreateNewEmployee()">Create Employee</button></td>-->
<td><button id="btnCreateNew" ng-click="$rootscope.ShowAlert('Create button pressed')">Create Employee</button></td>
</tr>
<tr>
<td ng-show="gotdata">
<table id="EmployeeList">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-if="employees && employees!={undefined}">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td><button id="btnDetailsA{{employee.id}}" ng-click="$parent.ShowDetails({{employee.id}})">Details</button></td>
<td><button id="btnDetailsB{{employee.id}}" ng-click="$parent.ShowDetails({{employee.id}})">Details B</button></td>
<td><button id="btnDetailsC{{employee.id}}" ng-click="ShowDetails({{employee.id}})">Details C</button></td>
<td><button id="btnDetailsD{{employee.id}}" ng-click="$scope.ShowDetails({{employee.id}})">Details D</button></td>
<td><button id="btnDetailsE{{employee.id}}" ng-click="$rootscope.ShowDetails({{employee.id}})">Details E</button></td>
<td><button id="btnDelete{{employee.id}}" ng-click="$parent.DeleteEmployee({{employee.id}})">Delete</button></td>
<td><button id="btnEdit{{employee.id}}" ng-click="$parent.EditEmployee({{employee.id}})">Edit</button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--The following is for listing the details of a single employee-->
<div id="DetailsSection" ng-show="DisplayAction=='Details'">
<table>
<tr>
<td>ID:</td>
<td> <input id="DetailsID" value={{employee.id}} /></td>
</tr>
<tr>
<td>Name:</td>
<td><input id="DetailsName" value={{employee.name}} /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="DetailsGender" value={{employee.gender}} /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="DetailsSalary" value={{employee.salary}} /> </td>
</tr>
<tr>
<td>
<button id="NavTolist" ng-click="DisplayList()">Back to List</button>
</td>
<td>
<button id="NavToDelete" ng-click="DeleteEmployee({{id}})">Delete</button>
</td>
<td>
<button id="NavToEdit" ng-click="EditEmployee({{id}})">Edit</button>
</td>
</tr>
</table>
</div>
<!--The following is for editing a employee-->
<!--<div id="EditSection" ng-show="DisplayAction=='Edit'">
<table>
<tr>
<td>ID:</td>
<td>
<input id="ID" value={{id}} />
</td>
</tr>
<tr>
<td>Name:</td>
<td><input id="" value={{name}} ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value={{gender}} ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value={{salary}} ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="EditUpdate" type="button" value="Update" ng-click="EditUpdate()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDeleteEdit" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for verification of deletion-->
<div id="DeletionSection" ng-show="DisplayAction=='Delete'">
<table>
<tr>
<td>Do you really want to delete {{name}}</td>
<td></td>
<td>
<button id="btnCancelDelete" type="button" value="No" ng-click="DisplayList()"></button>
</td>
<td>
<button id="btnDeleteEmployee" type="button" value="Yes" ng-click="DoDeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>
<!--The following is for creation of a employee-->
<!--<div id="CreationSection" ng-show="DisplayAction=='Create'">
<table>
<tr>
<td>Name:</td>
<td><input id="" value="" ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value="" ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value="" ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="btnCreateEmployee" type="button" value="Delete" ng-click="CreateEmployee()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
</tr>
</table>
</div>-->
</div>
</body>
</html>
unlike vanilla event handlers, ng-click will look for a event handler in the controller scope, so when you have:
<button id="NavTolist" ng-click="DisplayList()">Back to List</button>
your controller must have:
$scope.DisplayList = function() {
//call the web service to get the list of people
//set the display action so that the list will be displayed
GetAllEmployees($http)
$scope.DisplayAction = 'List';
};
you might be interested in take a look in a few sample projects over the web in order to better organize your code.
on a side note, whenever possible sample your web-capable code on plunker / jsfiddle / codepen, since it provides a huge help for anyone willing to help.
I want to do a search of a table with multiple textboxes. The user should be able to enter address in the address box and search the table my address, and enter city in the city search box and search the table by city. I can't get it to work, I'm getting the error message: Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Here's my html:
<table>
<thead>
<tr>
<th>
Address
</th>
<th>
City
</th>
</tr>
<tr>
<td>
<input ng-model="vm.search_address" />
</td>
<td>
<input ng-model="vm.search_city" />
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searchesFound = ( vm.searches | filter: {address: search_address, city: search_city})">
<td>
{{ search.address }}
</td>
<td>
{{ search.city }}
</td>
</tr>
</tbody>
</table>
ANd here's my controller:
(function () {
angular.module('crm.ma')
.controller('AdvancedSearchCtrl', function () {
var vm = this;
vm.search_address = "";
vm.search_city = "";
vm.searchs = [
{
address: '202 This St',
city : 'Columbus'
},
{
address: '205 That St',
city: 'Dayton'
}
]
});
})();
Any clues on what I'm doing wrong?
You forgot the vm object. In your filter vm.search_city and vm.search_address should be used:
<tr ng-repeat="search in vm.searchs | filter: {address: vm.search_address, city: vm.search_city}">
Look this:
var app = angular.module('ngApp', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.smartphones = [
{brand: 'Apple', model: 'iPhone 4S', price: '999'},
{brand: 'Samsung', model: 'SIII', price: '888' },
{brand: 'LG', model: 'Optimus', price: '777'},
{brand: 'htc', model: 'Desire', price: '666'},
{brand: 'Nokia', model: 'N9', price: '555'}
];
$scope.search = function(){
angular.forEach($scope.smartphones, function(value, key) {
var brand = ($scope.queryBrand? $scope.queryBrand.toLowerCase():' ');
var model = ($scope.queryModel? $scope.queryModel.toLowerCase():' ');
value.show = (value.brand.toLowerCase().indexOf(brand) > -1 ||
value.model.toLowerCase().indexOf(model) > -1 || (brand == ' ' && model == ' '));
console.log(!brand && !model)
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="ngApp" ng-controller="MainCtrl" class="container">
<input class="span4 pull-right" type="text" placeholder="Filter by brand" ng-model="queryBrand" ng-change="search()">
<input class="span4 pull-right" type="text" placeholder="Filter by model" ng-model="queryModel" ng-change="search()">
<div class="row">
<table id="results" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Brand</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="smartphone in smartphones" ng-init="smartphone.show=true" ng-show="smartphone.show">
<td id="brand">{{smartphone.brand}}</td>
<td id="model">{{smartphone.model}}</td>
<td id="price">{{smartphone.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>