I'm trying to search user by their email id. This partially works. If I search users for the first time by entering a email and clicking search button, it works. But then if I search of another user, its searches filters automatically without pressing the search button.
I should be able to search user only after I click the search button. Thanks in advance
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
console.log("in controller...");
$scope.newUser = {};
$scope.info = "";
// Users array list
if (localStorage.getItem("users") === null) {
$scope.users = [{
email: "Vai#yahoo.com",
password: "Sha123",
firstName: "Vai",
lastName: "LSha",
contact: "123-223-8989",
role: "Super-Admin",
company: ""
},
{
email: "John#yahoo.com",
password: "John123",
firstName: "John",
lastName: "Doe",
contact: "281-283-2480",
role: "Supplier-Admin",
company: "Apple"
},
{
email: "Rick#yahoo.com",
password: "Rick123",
firstName: "Rick",
lastName: "Fraiser",
contact: "987-283-2489",
role: "Supplier-User",
company: "Apple"
},
{
email: "Reek#yahoo.com",
password: "Reek123",
firstName: "Reek",
lastName: "Phaine",
contact: "876-277-2289",
role: "Supplier-User",
company: "Apple"
},
{
email: "Jim#yahoo.com",
password: "Jim123",
firstName: "Jim",
lastName: "Jones",
contact: "487-283-2489",
role: "Supplier-User",
company: "Apple"
}
];
localStorage.setItem("users", JSON.stringify($scope.users));
} else {
$scope.users = JSON.parse(localStorage.getItem("users"));
}
//Deleting a user.
$scope.deleteUser = function(user) {
$scope.clickedUser = user;
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
};
$scope.clearInfo = function() {
$scope.user = "";
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>User Management- M&M</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/userApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div>
<input type="text" placeholder="Search Users" ng-model="searchUsers.email">
<button ng-click="search = searchUsers" type="button">Search</button>
</div>
<hr>
<table border="1">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: {'email':search.email} track by $index">
<td>{{user.email}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.contact}}</td>
<td>{{user.role}}</td>
<td>{{user.company}}</td>
<td>
<button ng-click="deleteUser(user)" type="button">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
In first attempt your search.email was undefined, and when you clicked on search your search.email got defined, so next time on wards when you type something the default two way data binding was triggering the search.
In the below code snippet I have added a new function
$scope.searchUser = function(userEmail){
$scope.searchEmail = userEmail
}
and only when the user clicks on the button I am actually binding with the $scope which is triggering the search. Also added an onChange event where if the user erase up the text it resets the search
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
console.log("in controller...");
$scope.newUser = {};
$scope.info = "";
// Users array list
$scope.users = [{
email: "Vai#yahoo.com",
password: "Sha123",
firstName: "Vai",
lastName: "LSha",
contact: "123-223-8989",
role: "Super-Admin",
company: ""
},
{
email: "John#yahoo.com",
password: "John123",
firstName: "John",
lastName: "Doe",
contact: "281-283-2480",
role: "Supplier-Admin",
company: "Apple"
},
{
email: "Rick#yahoo.com",
password: "Rick123",
firstName: "Rick",
lastName: "Fraiser",
contact: "987-283-2489",
role: "Supplier-User",
company: "Apple"
},
{
email: "Reek#yahoo.com",
password: "Reek123",
firstName: "Reek",
lastName: "Phaine",
contact: "876-277-2289",
role: "Supplier-User",
company: "Apple"
},
{
email: "Jim#yahoo.com",
password: "Jim123",
firstName: "Jim",
lastName: "Jones",
contact: "487-283-2489",
role: "Supplier-User",
company: "Apple"
}
];
//Deleting a user.
$scope.deleteUser = function(user) {
$scope.clickedUser = user;
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
};
$scope.clearInfo = function() {
$scope.user = "";
};
$scope.searchUser = function(userEmail){
$scope.searchEmail = userEmail
}
$scope.onChange = function(){
if($scope.email.length === 0){
$scope.searchEmail = "";
$scope.email = "";
}
}
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>User Management- M&M</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div>
<input type="text" placeholder="Search Users" ng-change="onChange()" ng-model="email">
<button ng-click="searchUser(email)" type="button">Search</button>
</div>
<hr>
<table border="1">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: {'email': searchEmail} track by $index">
<td>{{user.email}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.contact}}</td>
<td>{{user.role}}</td>
<td>{{user.company}}</td>
<td>
<button ng-click="deleteUser(user)" type="button">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
$.get($querystudent, function(response)
{
tbodystudent.empty();
console.log("Table TBODY Cleared!");
var students = response.result;
var $i = 0
$.each(students, function(_,student)
{
$i = student.ID
tbodystudent.append(
$("<tr>").append(
$("<td>").text(student.FirstName),
$("<td>").text(student.MiddleName),
$("<td>").text(student.LastName),
$("<td>").text(student.CourseID),
$("<td>").text(student.YearLevel),
$("<input></input>").attr({'type':'button','class':'button is-primary is-small','id':$i, 'onclick': select($i)}).val("Select")
),
);
});
}, "json");
This is my current Jquery code that appends data to the tbody with attribute onclick trying to call a function select(),
function select(x)
{
console.log('Im Here! ', x)
}
Without clicking any button, the console is showing that the three buttons have been clicked already from the start of the page Onload.
Console indicates that the function is called already with no buttons being clicked
Inspect also indicates that the onclick attribute was not added to the button attributes
Based on your idea, I've updated and let it works. You can check the below demo:
'onclick': select($i) -> 'onclick': 'select(' + $i + ')'
$("<input></input>") -> $("<button>") : I'm still finding the reason why $("<input>") is not working
const students = [{
ID: 1,
FirstName: 'A',
MiddleName: 'B',
LastName: 'C',
CourseID: 1,
YearLevel: 1
},
{
ID: 2,
FirstName: 'A',
MiddleName: 'B',
LastName: 'C',
CourseID: 1,
YearLevel: 1
}, {
ID: 3,
FirstName: 'A',
MiddleName: 'B',
LastName: 'C',
CourseID: 1,
YearLevel: 1
}
]
function select(x) {
console.log('Im Here! ', x)
}
$.each(students, function(_, student) {
$i = student.ID
$('#tbodystudent').append(
$("<tr>").append(
$("<td>").text(student.FirstName),
$("<td>").text(student.MiddleName),
$("<td>").text(student.LastName),
$("<td>").text(student.CourseID),
$("<td>").text(student.YearLevel),
$("<button>").attr({
'type': 'button',
'class': 'button is-primary is-small',
'id': $i,
'onclick': 'select(' + $i + ')'
}).text("Select")
),
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">FirstName</th>
<th scope="col">MiddleName</th>
<th scope="col">LastName</th>
<th scope="col">CourseID</th>
<th scope="col">YearLevel</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="tbodystudent">
</tbody>
</table>
All together HTML with js work for custom filter. Here I am taking example of books with click filter when we click on subject name it filter
angular.module('testApp', []).controller('namesCtrl', function($scope) {
$scope.names = [{
name: 'Hindi'
},
{
name: 'Math'
},
{
name: 'English'
},
{
name: 'Science'
},
{
name: 'Computer'
},
{
name: 'History'
},
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<font size="3" color="red">
<p>Click the table headers to change the sorting order:</p>
</font>
<div ng-app="testApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Subject Name</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
</tr>
</table>
</div>
I am new in knockout. I want to make the list of students.
I have attached the list structure which returned from MVC as an image, Click here to view.
Js code:
var employeeListViewModel = {};
var employeeViewModel = {
id: "",
name: ko.observable("neenu"),
age: ko.observable(),
email: ko.observable(),
department: ko.observable(),
address: {
address1: ko.observable(),
city: ko.observable(),
State: ko.observable()
},
};
var employeePageViewModel = {
employee: employeeViewModel,
employees: employeeListViewModel
};
var dataSource = {
getemployees: function () {
getData("Employee/GetEmployees").then((data) => {
var result = ko.mapping.fromJS(data.data);
employeeListViewModel = result();
console.log(employeeListViewModel);
});
},
init: function () {
this.getemployees();
}
}.init();
ko.applyBindings(employeePageViewModel);
Html code:
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody data-bind="foreach: employees">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Id"></td>
</tr>
</tbody>
When I run this page ,It is neither displaying any error nor displaying data. Please help.
1) employeeListViewModel must be a ko.observableArray()
2) also when getting the result from your getData function just set the observableArray to the list:
employeeListViewModel(data.data); //assuming data.data is a [].
3) ko.mapping.fromJS(data.data); can be removed
I'm pretty new to angularjs.So,please kindly ignore if there are any errors.Here I have one dropdownlist within ng-repeat if I select the values in dropdownlist the corresponding Item code and the selected description from dropdownlist should pass to angularcontroller and I need to post it to the mvc controller
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope',function ($scope, $http,$rootScope) {
$scope.values = [{
Code: 1,
Description: 'Apple'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Mango'
}, {
COde: 4,
Description: 'Guva'
}
];
$scope.ddlrhs = '';
$scope.data = [{
Code: 1,
Description: 'Red'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Yellow'
}, {
Code: 4,
Description: 'Green'
}
];
$scope.submit = function ()
{
$scope.list = [];
for (var i = 0; i < $scope.values.length; i++) {
var j = "";
$scope.list.push({
VALUE: $scope.values[i].Code,
Description: $scope.myForm.items[i].Description
})
}
$http({
method: "POST",
url: "/Controller/Save",
data:
$scope.list
})
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div id="dvcollection" ng-App="myApp" ng-controller="ctrl" >
<form name="myForm" >
<table id="tblcollections">
<thead>
<tr >
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="myForm.items[$index]" ng-options=" element.Description for element in data ">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()"style="float:right;" >
</td>
</tr>
</tbody>
</table>
</form>
</div>
Hey May be this might be your expectation
<div ng-app="myApp" >
<div id="dvcollection" ng-controller="ctrl">
<form name="myForm">
<table id="tblcollections">
<thead>
<tr>
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="itemssample" ng-options=" element.Description for element in data " ng-change="pushingelement(item.Code,itemssample.Code)">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()" style="float:right;">
</td>
</tr>
</tbody>
</table>
</form>
<div> This is written to ensure that mapping is stored or not. (Not necessary)
<p ng-repeat="item in list">
Mapping of {{$index}} element {{item.ItemCode}} -> {{item.ColorCode}}
</p>
</div>
</div>
</div>
Ensure that your MVC Controller should have a model as
public class MapperClass
{
public int ItemCode { get; set; }
public int ColorCode { get; set; }
}
SCRIPT
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {
$scope.list = [];
$scope.values = [
{ Code: 1, Description: 'Apple' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Mango' },
{ Code: 4, Description: 'Guva' }
];
$scope.ddlrhs = '';
$scope.data = [
{ Code: 1, Description: 'Red' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Yellow' },
{ Code: 4, Description: 'Green' }
];
$scope.pushingelement = function (itemCode, colorCode) {
var temp = { "ItemCode": itemCode, "ColorCode": colorCode };
$scope.list.push(temp);
console.log($scope.list);
}
$scope.submit = function () {
$http({
method: "POST",
url: "/Controller/Save",
data:
object:$scope.list
})
}
}
]);
TRY ONCE I HOPE IT HELPS YOU
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>get selected value from dropdownlist in angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Red'
}, {
id: '2',
name: 'Green'
}, {
id: '3',
name: 'Orange'
}, {
id: '4',
name: 'Yellow'
}];
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
Select Name:
<select data-ng-model="ddlvalue">
<option value="">--Select--</option>
<option data-ng-repeat="t in sample" value="">{{t.name}}</option>
</select>
</form>
</body>
</html>
I am trying to select all checkboxes with one single checkbox. But how to do that?
This is my HTML:
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<!-- userlist -->
<!--<div id="scrollArea" ng-controller="ScrollController">-->
<table class="table">
<tr>
<th>User ID</th>
<th>User Name</th>
<th>Select</th>
</tr>
<tr ng-repeat="user in users | filter:search">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select"></td>
<td><tt>{{user.select}}</tt><br/></td>
</tr>
</table>
I create an extra checkbox to selecet and unselect all checkboxes.
JS:
.controller('UsersCtrl', function($scope, $http){
$http.get('users.json').then(function(usersResponse) {
$scope.users = usersResponse.data;
});
$scope.checkAll = function () {
angular.forEach($scope.users, function (user) {
user.select = true;
});
};
});
I tried this too, but none of them works for me :(
$scope.checkAll = function () {
angular.forEach($scope.users, function (user) {
user.select = $scope.selectAll;
});
};
You are missed the container divs with ng-controller and ng-app and angular.module.
user.select = $scope.selectAll is the correct variant.
https://jsfiddle.net/0vb4gapj/1/
Try setting the checked boxes against each user to be checked when the top checkbox is checked:
<input type="checkbox" ng-model="selectAll"/>
<table class="table">
<tr>
<th>User ID</th>
<th>User Name</th>
<th>Select</th>
</tr>
<tr ng-repeat="user in users | filter:search">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select" ng-checked="selectAll"></td>
<td><tt>{{user.select}}</tt><br/></td>
</tr>
</table>
Here is a JSFiddle you can use ng-checked with a variable on it like user.checked (or use the user.select as you want)
<div ng-app="app" ng-controller="dummy">
<table>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>
<input type="checkbox" ng-click="usersetting(user)" ng-checked="user.checked" ng-model="user.select">
</td>
<td><tt>{{user.select}}</tt>
<br/>
</td>
</tr>
</table>
<button ng-click="checkAll()">Check all</button>
</div>
JS:
var app = angular.module("app", []);
app.controller('dummy', function($scope) {
$scope.users = [{
id: 1,
name: "Hello",
select: 1
}, {
id: 2,
name: "World",
select: 1
}, ];
$scope.checkAll = function() {
angular.forEach($scope.users, function(user) {
user.checked = 1;
});
}
});
Simple use the following code
HTML
<input type="checkbox" ng-model="checkboxes.checked" data-ng-click="checkAll()" class="select-all" value="" />
JS
$scope.checkAll = function() {
angular.forEach($scope.users, function(item) {
$scope.checkboxes.items[item._id] = $scope.checkboxes.checked;
$scope.selection.push(item._id);
});
}