Here I have created a record using some radio button. And what I need is when I select the selectAll radio button the selected records should appear in the same page.
When I unselect any radio button in a record the black mark in selectAll checkbox should not appear in the checkbox the same example which we use in our g-mail where gmail use the check box and I'm trying to do it with radio button.
-----here is my index.html-------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<span>Table One</span>
<div ng-controller="peopleCtrl">
<label>
<input type="radio"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<table width="400" border="1">
<tr>
<th>check</th>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people">
<td>
<input type="radio" ng-model="person.check" ng-click="changeCheckAll()" />
</td>
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
<br>
<span>Table Two</span>
<table width="400" border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people | filter: {check:true}">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</div>
</body>
</html>
And my script page
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('peopleCtrl', function($scope) {
$scope.people = ([{
id: 1,
name: "Anil",
age: 21
}, {
id: 2,
name: "Niladri",
age: 20
}, {
id: 3,
name: "Venkat",
age: 22
}]);
$scope.checkAll = function() {
for(var i=0; i < $scope.people.length; i++) {
$scope.people[i].check = $scope.allChecked;
}
};
$scope.changeCheckAll = function() {
for(var i = 0; i < $scope.people.length; i++) {
if (!$scope.people[i].check) {
$scope.allChecked = false;
return false;
}
}
$scope.allChecked = true;
};
});
And my plnkr:http://plnkr.co/edit/RKAdEZYvsJu5wbhIs41A?p=preview
<div ng-controller="peopleCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<table width="400" border="1">
<tr>
<th>check</th>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people">
<td>
<input type="checkbox" ng-model="person.check" ng-click="changeCheckAll()" />
</td>
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
radio button is intended to be used when you want to give the user an option to select just one option in a set of options. You are using the radio button wrongly. Checkbox works perfectly here! http://plnkr.co/edit/udgGcsMTubxf4yZapm10?p=preview
Related
In this code, the 'm' is written inside the indexOf function. But no where in the code the value is passed. I am not able to understand how this 'm' deleting the right item in ng-repeat. When i change 'm' to something else it is now working. I am new to AngularJS.
In the main.js file there is removeitem function, i am getting from where the value of 'm' is coming , it has,nt passed from anywhere. I tried removeing 'm' but it doesnt work, it deletes the last item.
var app = angular.module('myApp', []);
app.controller('cont', function($scope) {
$scope.invoice = {
number: 10,
tax: 14,
items: [{
description: "",
quentity: 10,
cost: 300
}],
};
$scope.currency_symbol = [{
name: 'Indian Rupee',
currency: '₹'
},
{
name: 'USD',
currency: '$'
},
{
name: 'Euro',
currency: '€'
}
];
$scope.addItem = function() {
$scope.invoice.items.push([{
description: "description",
quentity: 1,
cost: 1
}]);
}
$scope.removeItem = function(m) {
$scope.invoice.items.splice($scope.invoice.items.indexOf(m), 1);
}
$scope.subTotal = function() {
var total = 0.0;
angular.forEach($scope.invoice.items, function(item, key) {
total += item.quentity * item.cost;
});
return total;
};
$scope.calcuteTax = function() {
return (($scope.subTotal() * $scope.invoice.tax) / 100);
};
$scope.grandTotal = function() {
return ($scope.subTotal() + $scope.calcuteTax());
};
});
<head>
<title>Simple Invoicing - Built with AngularJS </title>
<meta charset='utf-8'>
<meta name="description" content="AngularJS and Angular Code Example for creating Invoices and Invoicing Application">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="cont">
<div class="container" width="800px" id="invoice">
<div class="row">
<div class="col-xs-12 heading">
<strong>Billing System</strong>
</div>
</div>
</div>
<div class="main1">
<div="customer">
<select ng-init="currencySymbol=currency_symbol[0]" ng-model="currencySymbol" ng-options="currency.name+' '+currency.currency for currency in currency_symbol"></select>
</div>
</div>
<div class="main2">
<table border=1 width=100%>
<th></th>
<th>Description</th>
<th>Quantity</th>
<th>Cost{{' '+currencySymbol.currency}}</th>
<th>Total</th>
<tr ng-repeat="item in invoice.items">
<td text-align="center">
<a class="btn" href="" ng-click="removeItem()">
<strong>[x]</strong>
</a>
</td>
<td><input type="text" ng-model="item.description" placeholder="Description"></td>
<td><input type="number" ng-model="item.quentity" placeholder="10"></td>
<td><input type="number" ng-model="item.cost" placeholder="10"></td>
<td placeholder="0">{{item.quentity*item.cost}}</td>
</tr>
<tr>
<td text-align="center"><a class="btn" style="background-color:green;" href ng-click="addItem()">[+]</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td text-align="center"></td>
<td></td>
<td></td>
<td>Sub Total:</td>
<td>
<p>{{subTotal()}}</p>
</td>
</tr>
<tr>
<td text-align="center"></td>
<td></td>
<td></td>
<td>Tax:<input type="number" ng-model="invoice.tax"></td>
<td>
<p>{{calcuteTax()}}</p>
</td>
</tr>
<tr>
<td text-align="center"></td>
<td></td>
<td></td>
<td>Grand Total:</td>
<td>
<p>{{grandTotal()}}</p>
</td>
</tr>
</table>
</div>
</body>
How do i make the code delete the item on which i click ?
Add item as an argument to the removeItem function:
<tr ng-repeat="item in invoice.items">
<td text-align="center">
̶<̶a̶ ̶c̶l̶a̶s̶s̶=̶"̶b̶t̶n̶"̶ ̶h̶r̶e̶f̶=̶"̶"̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶r̶e̶m̶o̶v̶e̶I̶t̶e̶m̶(̶)̶"̶>̶
<a class="btn" href="" ng-click="removeItem(item)">
<strong>[x]</strong>
</a>
</td>
$scope.removeItem = function(m) {
$scope.invoice.items.splice($scope.invoice.items.indexOf(m), 1);
}
This question might sound very basic to many of you, but please pardon me as I am newbie to angularjs.
Basically what I am trying to do is changing the value of a corresponding textbox on click to its corresponding checkbox.
Here is My Markup Code:
<table class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Phone</th>
<th>No. Of Chits</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in UnassignedMembers ">
<td>
<input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity)">
</td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td>
<input type="number" min="1" ng-model="entity.Count">
</td>
</tr>
</tbody>
</table>
I want to assign a value of "1" to the entity. Count on check of entity.isChecked.
You just have to assign valaue to entity.Count like following
$scope.selectEntity = function(entity){
if(entity.isChecked){
entity.Count = 1;
}else{
entity.Count = 0; // or null
}
};
<tr ng-repeat="entity in UnassignedMembers " >
<td><input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity)"></td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td><input type="number" min="1" ng-model="entity.Count"></td>
</tr>
You can achieve it even without the function in controller,
HEre is the code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<table>
<tr>
<td><input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity);entity.Count = entity.isChecked ? 1 : ''"></td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td><input type="number" min="1" ng-model="entity.Count"></td>
</tr>
</table>
</div>
</body>
</html>
Please run the above Snippet
Please tell me which value to fill in checkbox. So that I can change the code accordingly.
HERE IS A WORKING DEMO
I'm using the angular + bootstrap to create a table and for each row, it will have a popover button. What I want to do is to change 'Show Password' to 'Hide Password' when the popover is shown, and change back when the popover is closed.
<tr ng-repeat="entry in data">
<td>{{ entry.site }}</td>
<td>{{ entry.username }}</td>
<td>
<button popover-placement="right" uib-popover="{{calculatePassword(entry)}}" class="btn btn-primary btn-sm">Show Password</button>
</td>
</tr>
I tried to use lines such as 'displayed? "Show Password":"Hide Password"' but I can't find a proper spot to toggle 'displayed'. I can't find a built-in feature of uib-popover to do that neither. Please help. Thanks!
You could use ng-click to toggle a variable each time the button is clicked and change the text accordingly.
<button ng-click="entry.passwordDisplayed = !entry.passwordDisplayed">
{{entry.passwordDisplayed ? 'Hide' : 'Show'}} Password
</button>
var app = angular.module("app", ["ui.bootstrap"]);
app.controller("controller", function($scope, $sce) {
$scope.data = [
{
site: "Facebook",
username: "jsmith",
password: "abc123"
}
];
var trusted = {};
$scope.htmlPopover = function(entry) {
var html = '<b>Password:</b> ' + entry.password;
return trusted[html] || (trusted[html] = $sce.trustAsHtml(html));
};
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app" ng-controller="controller">
<div class="wrapper">
<table class="table">
<thead>
<tr>
<th>Site</th>
<th>Password</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entry in data">
<td>{{ entry.site }}</td>
<td>{{ entry.username }}</td>
<td>
<button ng-click="entry.passwordDisplayed = !entry.passwordDisplayed" class="btn btn-primary btn-sm" uib-popover-html="htmlPopover(entry)" class="btn btn-default">{{entry.passwordDisplayed ? 'Hide' : 'Show'}} Password</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I want to use filter function and input search at the same time by using AngularJS. I can able to do with multiple functions. But I'm getting some errors while I add an textbox for search. Is there any way to do this? I tried some ways but no one did not work.
Thanks in advance.
Example code is below
var app = angular.module("app", []),
url = "http://www.filltext.com/?rows=50&pretty=true&fName={firstName}&age=[18,19,20,21]";
app.controller("controller", function($scope, $http) {
$http.get(url)
.success(function(resp) {
$scope.list = resp;
});
$scope.filterAge = function(item) {
return item.age > 19;
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Filter</title>
</head>
<body ng-controller="controller">
<div class="container">
<br>
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: filterAge">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should add custom filter to angular module instead adding filter function to your controller. This is the example:
CustomFilter:
.filter('filterByAge', function filterByAge() {
return function(array, age) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item.age > age) {
filteredArray.push(item);
}
});
return filteredArray;
}
});
HTML
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: search | filterByAge:19">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
$scope.$watch('search', function (data) {
//sorting logic
})
Watcher is waiting for any action taken on search filed then the function is executed.
I have checkboxes with table headers, i want to hide the table columns and rows based on the checkbox click,
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked=='true'">Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked=='true'">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
I tried but no luck.
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked"><a>Activity ID</a></th>
//here checked gets bool value itself based on selection. you don't need to compare it to string 'true'.
//keep in mind i assume {{checked}} returns only bool value
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
Working fiddle for your : http://jsfiddle.net/b69pkeLd/1/
Let me know if any issue occurs.
I hope this is what you are looking for:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.fieldvalues = [
{text: 'Test1', checked: false},
{text: 'Test2', checked: false}
];
$scope.makerQueueData = [
'Whatever your', 'data is'
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="opt in fieldvalues">
<input type="checkbox" id="checkbox-{{$index}}" ng-model="opt.checked" value="{{opt.text}}" />
<label for="checkbox-{{$index}}">{{opt.text}}</label>
<table ng-show="opt.checked">
<tr>
<th>Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="opt.checked'">{{$index}}</td>
<td>{{nm}}</td>
</tr>
</table>
</div>
</div>
Moreover, use <label> for type="checkbox" description. This makes the label clickable.