I'm show the user list using datatable angularjs. I want to disable\enable button on checked check box.i have the one button this button enable on etlish one checked on check box in the table other wise disable this button.any one how can do that.
this is my button :
<button type="button" class="btn btn-success">Send</button>
This is my controller.js
app.controller("userscontroller", [
"$scope",
"$http",
"DTOptionsBuilder",
"DTColumnBuilder",
"userservice",
"$compile",
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder, userservic, $compile) {
$scope.dtColumns = [
DTColumnBuilder.newColumn("fullName", "Full Name").withOption('name','firstname'),
DTColumnBuilder.newColumn("username", "Name").withOption('name','username'),
DTColumnBuilder.newColumn("email", "Email").withOption('name', 'email'),
DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(function (data, type, full, meta) {
return '<button class="btn btn-primary" ng-click="delete(' + data.id + ');"><i class="fa fa-eye"></i>' + '</button>';
}),
DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(function (data, type, full, meta) {
return '<input type="checkbox" name="check" id="'+ data.userid +'">';
})
]
$scope.dtOptions = userservice.GetAllUser(DTOptionsBuilder)
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full_numbers')
.withDisplayLength(50)
.withOption('aaSorting', [3, 'desc']);
function createdRow(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
}
}
]);
this is my code so any one idea how can do that please let me know.
Here is a very simple example on how to enable/disable a delete button when checking/unchecking an entry.
angular.module('app', []);
angular.module('app').controller('ExampleController', ['$scope', '$q', function($scope, $q) {
$scope.users = [{
"id": "1",
"fullName": "Marty McFly",
"username": "mmfly",
"email": "mmfly#bttf.com"
},
{
"id": "2",
"fullName": "Robert Plant",
"username": "rplant",
"email": "rplant#ledzep.com"
}
];
$scope.deleteUser = function(id) {
console.log("Deleting user with id", id);
}
}]);
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
<table border="1" cellpadding="8">
<tr>
<th></th>
<th>Fullname</th>
<th>Username</th>
<th>Email</th>
<th>Actions</th>
</tr>
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-model="user._selected"></td>
<td>{{user.fullName}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td><button ng-disabled="!user._selected" ng-click="deleteUser(user.id)">Delete</button></td>
</tr>
</table>
</div>
</body>
</html>
Related
Now I am trying to select box with disabled.
When $shop.products.product[i].productId is changed by selectBox, I want that value disabled in select box option.
for example, if i select 3 in select box on second row, then select box option 1,3 are disabled.
so i register $watch witch resync isDisabled field when $shop.products[i].productId is changed.
i don't know why $watch is no calling. help me please.
// Code goes here
angular.module("myApp")
.controller("myCtrl", function($scope) {
$scope.shop = {
"id" : 'shop1',
"products" : [
{"productId" : 1,"desc" : 'product1'},
{"productId" : 2,"desc" : 'product2'}
]
};
$scope.allSelectBoxItems = [
{"id" : 1, "isDisabled" : true},
{"id" : 2, "isDisabled" : true},
{"id" : 3, "isDisabled" : false},
{"id" : 4, "isDisabled" : false}
];
$scope.addWatcher = function(index){
console.log('register watcher to ' + index);
$scope.$watch('shop.product[' + index + '].productId', function(newValue, oldValue){
console.log('watcher envoked');
if (newValue != oldValue) {
var selected = $scope.shop.products.map(function (product) {
return product.productId;
});
for (var i = 0; i < $scope.allSelectBoxItems.length; i++) {
var isSelected = selected.includes($scope.allSelectBoxItems[i].productId);
console.log(isSelected);
$scope.allSelectBoxItems.isDisabled = isSelected;
}
}
});
}
angular.forEach($scope.shop.products, function(value, index){
$scope.addWatcher(index);
});
$scope.addProduct = function(){
var nextProductId = $scope.shop.products.length + 1;
var newProduct = {"productId" : nextProductId ,"desc" : 'product' + nextProductId};
$scope.shop.products.push(newProduct);
$scope.addWatcher(nextProductId - 1);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script>
angular.module("myApp", ['ngAnimate', 'ui.bootstrap'])
</script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div>
<table class="table">
<tbody>
<tr>
<th>id</th>
<td>{{shop.id}}</td>
</tr>
<tr>
<td>
products
<br>
<button type="button" class="btn btn-default" ng-click="addProduct()"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="margin-right:4px"></span>add product</button>
</td>
<td>
<table class="table">
<tbody>
<tr>
<td>producId</td>
<td>desc</td>
</tr>
<tr ng-repeat="product in shop.products">
<td>
<select ng-model="product.productId" ng-options="selectBoxItem.id as selectBoxItem.id disable when selectBoxItem.isDisabled for selectBoxItem in allSelectBoxItems"></select>
</td>
<td>
{{product.desc}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Currently I want to show HTML table by parsing JSON data from file using Angular JS, And It's not working can someone please help me?
And Also As a Enhancement How Can I get the 2 Divs for 2 different JSON file
HTML Code
<html>
<div ng-controller="get_controller">
<input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
<span class="input-group-btn">
<button type="submit" ng-click="geValues()" class="btn btn-primary">Submit</button>
</span>
</div>
<div ng-controller="get_controller">
<table>
<tbody>
<tr>
<th ng-repeat="list in personDetails">{{list.Name}}
</th>
</tr>
<tr>
<td class="features" ng-repeat="list in personDetails">{{list.Location}}
</td>
</tr>
</tbody>
</table>
</div>
</html>
Angular JS Code
var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function ($scope, $http) {
$scope.geValues = function() {
$http({method: 'POST', url: 'posts.json'}).success(function(data) {
$scope.post = data;
$scope.personDetails = Employee;
})
},
});
posts.json (Json File)
{
"Employee": [
{
"Name": "Rocky",
"Location": "Office"
},
{
"Name": "John",
"Location": "Home"
}
]
}
Should be a GET request, also the you need to access the data from the response object which contains the Employee array. Code should be,
$http.get('test.json').then(function (response){
$scope.post = response.data;
$scope.personDetails = response.data.Employee;
});
if you want it to happen on ng-click, put the call inside a function,
$scope.geValues = function() {
$http.get('test.json').then(function(response) {
$scope.post = response.data;
$scope.personDetails = response.data.Employee;
});
}
DEMO
I 'm working on my AngularFire project. I've a database something like this https://dinosaur-facts.firebaseio.com/. What I'm doing is first searching the key like the dinosaurs child such as "linhenykus" and storing its keys and values to other $scope variable.
my code in controller
var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs" + "/" + $scope.dinoID); //$scope.dinoID is variable containg dino keys
$scope.detRef = $firebaseArray(ref);
I'm getting the output like
[{"$value":-85000000,"$id":"appeared","$priority":null},{"$value":0.6,"$id":"height","$priority":null},{"$value":1,"$id":"length","$priority":null},{"$value":"theropoda","$id":"order","$priority":null},{"$value":-75000000,"$id":"vanished","$priority":null},{"$value":3,"$id":"weight","$priority":null}]
How to fetch the keys and values?
Use ngRepeat directive, as below:
<tr ng-repeat="obj in array track by $index">
To filter the array you can use the filter of Angular:
<tr ng-repeat="obj in array | filter: criteria track by $index">
Here's an example:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$filter'];
function MainCtrl($scope, $filter) {
$scope.criteria = {};
$scope.array = [
{
"$value":-85000000,
"$id":"appeared",
"$priority":null
},
{
"$value":0.6,
"$id":"height",
"$priority":null
},
{
"$value":1,
"$id":"length",
"$priority":null
},
{
"$value":"theropoda",
"$id":"order",
"$priority":null
},
{
"$value":-75000000,
"$id":"vanished",
"$priority":null
},
{
"$value":3,
"$id":"weight",
"$priority":null
}
];
$scope.getObj = function(value, id) {
$scope.obj = $filter('filter')($scope.array, {
"$value": value,
"$id": id
})[0];
}
$scope.getObj("theropoda", "order");
}
})();
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" placeholder="Search by value" ng-model="criteria.$value">
<input type="text" placeholder="Search by id" ng-model="criteria.$id">
<!-- Note that this button is just as an example to change the object displayed below -->
<button type="button" ng-click="getObj()">Change the value of object</button>
<hr>
Obj: <span ng-bind-template="Value: {{obj.$value}}, Id: {{obj.$id}}"></span>
<p></p>
<table width="100%">
<thead>
<tr>
<th>Value</th>
<th>Id</th>
<th>Priority</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in array | filter: criteria track by $index">
<td ng-bind="obj.$value"></td>
<td ng-bind="obj.$id"></td>
<td ng-bind="obj.$priority"></td>
</tr>
</tbody>
</table>
</body>
</html>
Below is a json response from my API. I would like to utilize ng-repeat in my html in order to show this data back to an end-user. How do I go about in my controller de-serializing this json data.
{
"message": "Query to return servers",
"result": [
{
"meta": [
"Computer",
"SQLPort",
"Domain"
],
"rows": [
[
"MyCompterName",
"1433",
"XXXX"
]
]
}
]
}
here is the code for the app.js that get loaded into the index.html
var app = angular.module('DSCApp', ['ngRoute', 'ngResource','ui.router']);
Config
app.config(function($routeProvider){
$routeProvider
.when('/DSC', {
templateUrl: "DSC.html",
controller: 'DscController'
})
.otherwise({ redirectTo: '/' });
});
Data Factory
app.factory('dataFactory', ['$http', function($http) {
var urlBase = '/api';
var dataFactory = {};
dataFactory.getServers = function () {
return $http.get(urlBase);
};
return dataFactory;
}]);
Controller
app.controller('DscController', ['$scope', 'dataFactory',
function ($scope, dataFactory) {
$scope.status
$scope.servers;
getServers();
function getServers() {
dataFactory.getServers()
.success(function (srv) {
$scope.servers = srv;
})
.error(function (error) {
$scope.status = 'Unable to load server data: ' + error.message;
});
}
}]);
Using ng-repeat in both the table head and table body should work.
<html ng-app='app' ng-controller='DscController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table ng-if="servers" class="table table-bordered">
<thead>
<tr>
<th ng-repeat="head in servers.result[0].meta">{{head}}</th>
</tr>
</thead>
<tbody ng-repeat="r in servers.result">
<tr ng-repeat="row in r.rows">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
<p ng-if="!servers">{{status}}</p>
</div>
</div>
</body>
</html>
I've included the necessary repeats to handle the data exactly as it was presented. I assume the meta will be the same for all results.
I am having trouble with my controller. I am trying to set the default order on page load to display in sequence by number. Right now the the cards just load and one can select an order by.
I need some help please.
Controller:
var cardApp = angular.module('cardApp', []);
cardApp.controller('MainController', ['$scope', function ($scope) {
$scope.greeting = "AngularJS Hello World!";
$scope.subTitle = "AngularJS Intro";
function ctrl($scope, $filter) {
$scope.cards = [
{ "number": "2", "suit": "Hearts", "numOrd": 2 },
{ "number": "10", "suit": "Spades", "numOrd": 10 },
{ "number": "5", "suit": "Spades", "numOrd": 5 },
{ "number": "Q", "suit": "Hearts", "numOrd": 12 }
];
}
}]);
View:
<!doctype html>
<html>
<head>
<title>Starting Angular</title>
</head>
<body ng-app="cardApp">
<div ng-controller="MainController">
<h1 ng-bind="greeting"></h1>
<h3 ng-bind="subTitle"></h3>
<span>Sort By:</span>
<select ng-model="orderProp">
<option value="suit">Suit</option>
<option value="numOrd">Number</option>
</select>
<hr>
<table>
<tr>
<th>Number</th>
<th>Suit</th>
</tr>
<tr ng-repeat="card in cards | orderBy:orderProp">
<td ng-bind ="card.number"></td>
<td ng-bind ="card.suit"></td>
</tr>
</table>
<br />
</div>
<script src="http://code.angularjs.org/1.3.3/angular.min.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
define a value of orderProp as part of the scope creation just like you did for greeting and subTitle.
$scope.orderProp = 'numOrd';