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>
Related
I have made the code the display the data into the data-table with the help of HTTP GET Service.
I need to make custom pagination showing only 4 buttons previous, 1, 2, next page.
Note: When user is on page 1 of pagination it should show previous, 1, 2, next page and if the user is on page 2 it should show previous, 2, 3, next page and simultaneously like that if any number of data available. If the data is less than 10 only it should display previous, 1, next page and if it exceeds more than 10 it has to follow the above said steps.
Angular JS Code:
<script>
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/users")
.then(function(response) {
$scope.persons = response.data;
});
});
})(angular);
</script>
HTML Code to display the Data-table:
<table datatable="ng" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td>{{ $index+1 }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td>{{ person.email }}</td>
<td>{{ person.phone }}</td>
</tr>
</tbody>
</table>
just use
ng-if
or
ng-show
and a flag for conditional display of second numbered button, also bind numbered button's inside to variables.
updated it with client side paging
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="app" style="padding: 10px">
<div ng-controller="myctrl">
<h1>test pager</h1>
<table datatable="ng" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>Title</th>
<th>Completed</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="todo in pagedTodos">
<td>{{ todo.id }}</td>
<td>{{ todo.userId }}</td>
<td>{{ todo.title }}</td>
<td>{{ todo.completed }}</td>
</tr>
</tbody>
</table>
<div>
<button class="btn btn-default" ng-click="goPage(lower-1)"><span>previous</span></button>
<button class="btn btn-info" ng-click="goPage(lower)"><span>{{lower}}</span></button>
<button ng-if="showUpper" class="btn btn-default" ng-click="goPage(upper)"><span>{{upper}}</span><span></span></button>
<button class="btn btn-default" ng-click="goPage(upper)"><span>next page</span></button>
</div>
<script>
var app = angular.module("app",[]);
app.controller("myctrl",["$scope", "$http", function($scope, $http){
var pageCount = 1;
var currentPage = 1;
var pageSize = 10;
$scope.lower = 1;
$scope.upper = 2;
$scope.showUpper = false;
$scope.pagedTodos = [];
var allTodos = [];
$http.get("https://jsonplaceholder.typicode.com/todos")
.then(function(response) {
allTodos = response.data;
pageCount = Math.ceil(allTodos.length / pageSize);
$scope.goPage(1);
});
$scope.goPage = function(page){
$scope.pagedTodos = allTodos.slice((page -1) * pageSize , page * pageSize);
updatePagerStatus(page);
}
var updatePagerStatus = function(pNewPage){
currentPage = pNewPage;
$scope.showUpper = pageCount > 1;
$scope.lower = currentPage;
$scope.upper = currentPage + 1;
}
}]);
</script>
</body>
</html>
I want to show data in a table using angularjs in codeigniter.
Controller:
public function source_list_for_test(){
$data['get_source'] = $this-> admin_model-> get_all_source_list_for_test();
echo json_encode($data['get_source']);
}
Model:
function get_all_source_list_for_test() {
$this->db->select('*');
$this->db->from('source');
$query = $this->db->get();
return $query->result_array();
}
View:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div class="table-responsive" ng-app="myapp" ng-controller="tabletest">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Sl No.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{index + 1}}</td>
<td>{{data.name}}</td>
<td><a class="btn btn-info btn-sm btn-fill" href="">
<i class="fa fa-pencil-square-o"></i> Edit</a>
<a class="btn btn-danger btn-sm btn-edit btn-fill delete" id="" ><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="<?php echo base_url()?>app/js_code.js></script>
Js file is
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('tabletest', function($scope, $http) {
$http.get(baseUrl + "admin/source_list_for_test")
.then(function(response) {
$scope.datas = response.data;
});
});
</script>
I tried this but data not fetched and not bind in my view page.this shows below screen shoot.
enter image description here
did you check for app.js file, may be app.js not downloaded.
Forgive me because I'm relatively new to AngularJS. I have a situation where I am calling to a WebApi webservice. I have two pages, one that binds and one that doesn't, with the same code in both. I can see that the webservice is being hit and IS returning data. Any idea what the problem could be??
This is the data that is being returned by the webservice:
[{"id":1,"name":"Chester" , "gender":"Male" , "salary":25000},
{"id":2,"name":"Mary" , "gender":"Female" , "salary":15000},
{"id":3,"name":"Tim " , "gender":"Male" , "salary":22000},
{"id":8,"name":"Wayne", "gender":"Male" , "salary":81231}]
The code that works is as follows:
<!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="MyModule">
<div ng-controller="MyController" ng-init="initController">
{{MadeItHereMessage}}
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The code that doesn't work is here:
<!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}}
<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" type="button" value="Create Employee" ng-click="CreateNewEmployee()"></button></td>-->
</tr>
<tr>
<td ng-show="gotdata">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
<!--<table id="EmployeeList">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="for employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td><button type="button" value="Details" ng-click="ShowDetails({{employee.id}})"></button></td>
<td><button type="button" value="Delete" ng-click="DeleteEmployee({{employee.id}})"></button></td>
<td><button type="button" value="Edit" ng-click="EditEmployee({{employee.id}})"></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={{id}} /></td>
</tr>
<tr>
<td>Name:</td>
<td><input id="DetailsName" value={{name}} /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="DetailsGender" value={{gender}} /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="DetailsSalary" value={{salary}} /> </td>
</tr>
<tr>
<td>
<button id="NavTolist" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDelete" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
<td>
<button id="NavToEdit" type="button" value="Edit" ng-click="EditEmployee({{id}})"></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"></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>
I am getting the heading, but no actual data from the web service.
The angularjs javascript file is here:
var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
function ($scope, $http) {
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 = '';
$scope.gotdata = false;
DisplayList();
}
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.go = 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';
};
function ShowDetails(id) {
//call the web service to get the details of the person
//Set the $scope.CurrentEmployee
$scope.DisplayAction = 'Details';
};
function CreateEmployee() {
//perform the actual creation based on $scope.CurrentEmployee
//if successful
DisplayList();
};
function DeleteEmployee(id) {
$scope.DisplayAction = 'Delete';
};
function DoDeleteEmployee(id) {
//Perform actual deletion
//if successful
DisplayList();
};
function EditEmployee(id) {
//get the employee based on ID
$scope.DisplayAction = 'Edit';
};
function EditUpdate() {
//perform the actual update based on $scope.id
//if successful
DisplayList();
};
}
);
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;
}
);
});
Replace the call to window.setTimeout with the $timeout service.
//window.setTimeout(function () {
//Use $timeout service
$timeout(function() {
$scope.gotdata = true;
}, 1000);
The $timeout service is properly integrated with the AngularJS digest cycle. Changes to $scope made with setTimeout are not immediately seen by the AngularJS framework.
For more information, see AngularJS $timeout Service API Reference
Your template is loaded before you get the http data. So a solution is to display the template when the ressource is loaded with ng-if.
Can you try:
<tr ng-repeat="employee in employees" ng-if="employees && employees!={undefined}">
First you don't need to pass the $http into your "GetAllEmployees"-Function because it's already there!
Second, I would suggest to use the "$q" to save the response into a variable. Check this out
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
I have this part of code where second <tr> appears only on Edit click and a form appears which I'm displaying using directive.
<table class="table">
<tbody ng-repeat="Emp in Employees">
<tr>
...
<td>
<input type="button" class="btn btn-default" value="Edit" ng-click="isCollapsed = !isCollapsed" />
</td>
</tr>
<tr collapse="isCollapsed">
<td>
<div>
<employee-form></employee-form>
</div>
</td>
</tr>
</tbody>
</table>
Now I have a button in my employeeForm directive as well which when clicked should make this form disappear (isCollapsed=true). But somehow that is not working.
Markup for employee-form:
<form>
...
<button type="button" class="btn btn-default" value="Cancel" ng-click="isCollapsed = true" />
</form>
JS part for this is:
$scope.isCollapsed = true;
So what I want is on click of the Cancel button in the employeeForm the <tr> should disappear.
View in Plunker
I hope it may help you:..
HTML:
<div ng-app="myapp" ng-controller="myctrl" id="id01">
<table>
<tbody ng-repeat="emp in Employees">
<tr>
<td>
<p>{{emp}}<input type="button" value="edit" ng-click="setshowindex($index)"/></p>
</td>
</tr>
<tr ng-class="{'show':$index==showing,'hide':$index!==showing}">
<td>
<employee-form></employee-form>
</td>
</tr>
</tbody>
</table>
Script:
angular.module('myapp',[])
.controller('myctrl',function($scope){
//$scope.collapsed = true;
$scope.Employees = ['abc','xyz','klm'];
$scope.showing = -1;
$scope.setshowindex = function (i) {
$scope.showing = -1;
$scope.showing = i;
};
})
.directive('employeeForm',function(){
return {
restrict: 'E',
replace:true,
template: '<form><input type="text" ng-value="emp" /><button ng-click="setshowindex(-1)">Cancel</button></form>'
};
});
CSS:
tr.show{
display: table-row;
}
tr.hide{
display: none;
}