I want to show button post only when modelCheck will change.
My code :
HTML :
<table>
<tr>
<th>name</th>
<th><button class="btn" ng-if="modelCheck === {}" ng-click="post()">post</button></th>
<th><button class="btn disabled" ng-if="modelCheck !== {}" ng-click="post()">post</button></th>
</tr>
<tr ng-repeat="x in messages">
<td>{{x.name}}</td>
<td><input type="checkbox" ng-model="modelCheck[x.name]"/></td>
</tr>
</table>
JS:
$scope.modelCheck = {};
$scope.messages =
[
{
"name": "eva",
},
{
"name": "ben",
},
];
$scope.post = function(){
var data = [];
for (var k in $scope.modelCheck) {
if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
data.push({'name': k});
}
}
console.log(data);
// do with data as you wish from here
};
Plunker:http://next.plnkr.co/edit/xQ3AGFW03qGWKyxI
My code doesn't work. Thanks for answers and help in advance!
use this condition to check the empty object
<th><button class="btn" ng-if="(modelCheck | json) != ({} | json)" ng-click="post()">post</button></th>
Related
I have one table which have edit, delete and add options. My problem is when I click on add button want to add row with empty input fields. I have write below code for this. What should I do to add empty row with empty input values.
My code
<div ng-controller="AppKeysCtrl">
<button ng-click="add()">
Add
</button>
<table class="table table-hover mytable">
<thead>
<tr>
<th></th>
<th>Created</th>
<th>App Key</th>
<th>Name</th>
<th>Level</th>
http://jsfiddle.net/Thw8n/155/#update <th>Active</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="entry in appkeys" data-ng-class="{danger:!entry.active}">
<td>{{$index + 1}}</td>
<td>{{entry.timestamp | date:'mediumDate'}}</td>
<td>{{entry.appkey}}</td>
<td>
<span data-ng-hide="editMode">{{entry.name}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="entry.name" data-ng-required />
</td>
<td>
<span data-ng-hide="editMode">{{entry.level}}</span>
<select class="form-control" name="entry.level" data-ng-model="entry.level" data-ng-show="editMode">
<option value="3">3 - Developer Access - [Temporary]</option>
<option value="2">2 - Standard Tool Access - [Default]</option>
<option value="1">1 - Administrative Access - [Admin Section Only]</option>
</select>
</td>
<td>
<span data-ng-hide="editMode">{{entry.active && 'Active' || 'Inactive'}}</span>
<select class="form-control" name="entry.active" data-ng-model="entry.active" data-ng-show="editMode">
<option value="true">Active</option>
<option value="false">Inactive</option>
</select>
</td>
<td>
<button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default">Edit</button>
<button type="submit" data-ng-show="editMode" data-ng-click="editMode = false" class="btn btn-default">Save</button>
<button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; cancel($index)" class="btn btn-default">Cancel</button>
</td>
</tr>
</tbody>
</table>
<pre>newField: {{newField|json}}</pre></br></br>
<pre>appkeys: {{appkeys|json}}</pre>
</div>
app = angular.module("formDemo", []);
function AppKeysCtrl($scope, $http, $location) {
var tmpDate = new Date();
$scope.newField = [];
$scope.editing = false;
$scope.appkeys = [
{ "appkey" : "0123456789", "name" : "My new app key", "created" : tmpDate },
{ "appkey" : "abcdefghij", "name" : "Someone elses app key", "created" : tmpDate }
];
$scope.editAppKey = function(field) {
$scope.editing = $scope.appkeys.indexOf(field);
$scope.newField[$scope.editing] = angular.copy(field);
}
$scope.saveField = function(index) {
//if ($scope.editing !== false) {
$scope.appkeys[$scope.editing] = $scope.newField;
//$scope.editing = false;
//}
};
$scope.cancel = function(index) {
//if ($scope.editing !== false) {
$scope.appkeys[index] = $scope.newField[index];
$scope.editing = false;
//}
};
$scope.add = function () {
var entry = {};
//$scope.goals.push(goal);
$scope.appkeys.push(entry);
};
}
angular.element(document).ready(function() {
angular.bootstrap(document, ["formDemo"]);
});
I have problem in this that when I click on add empty row is adding which have form fields with ng-hide attribute. I want to add row dynamically with new input boxes for each column. What should I do for this? Please help.
It's quite simple. You need to push an object with blank value into your array.
Below is the code:
Controller
$scope.add = function () {
$scope.appkeys.push({appkey : '', name : '', created : '' });
};
The above code will only add a row. I have updated your JSFiddle for your desired output.
Please go through with the given link.
http://jsfiddle.net/Thw8n/570/
You need to paste the following code:
$scope.add = function () {
$scope.appkeys.push({appkey : '', name : '', created : '' });
};
You can push object with empty properties in your appkey array:
var tempObject = {
"appkey":"",
"name":"",
"created":""
};
$scope.appkeys.push(tempObject);
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 need your help, I new in angularJs. My question is how can I add items into table.
This is my index.html code:
<div class="col-md-5">
<table class="table">
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr ng-repeat="product in products" class="quantity">
<td>{{product.name}}</td>
<td> <sapn class="plus-icon glyphicon glyphicon-minus" ng-click="minusOne($index)"></sapn>
{{product.quantity}}
<sapn class="minus-icon glyphicon glyphicon-plus" ng-click="plusOne($index)"></sapn>
</td>
<td>{{product.price }} </td>
<td>{{product.price * product.quantity}}</td>
</tr>
</table>
<span>Total: {{ getTotal() }}</span>
</br>
<button>first product</button>
<button>second product</button>
</div>
and this is controller.js file:
app.controller('MainController', ['$scope', function ($scope) {
$scope.appName = 'diyetSahovatKafe';
$scope.products = [
{
name: 'Обычный котлет',
quantity: 0,
price: 3500,
}
];
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.products.length; i++){
var product = $scope.products[i];
total += (product.price * product.quantity);
}
return total;
}
$scope.plusOne = function(index){
$scope.products[index].quantity += 1;
};
$scope.minusOne = function(index){
$scope.products[index].quantity -= 1;
};
and this is appearance
appearance
by clicking the button items should be added, can anybody help me with this?
Adding an item to products should automatically update your table since it is constructed with ng-repeat. Angular will detect the modification of products and refresh the table's rows since they are based on it.
$scope.products.push({ name : "I don't speak russian", quantity: 0, price : 4200 });
I'm attempting to setup a clickable table column header that sort Ascending when first clicked, and Descending when clicked again. My ascending sort is working fine, but I'm not sure how to setup an expression within my OrderBy to sort Descending
My setup thus far:
Table html has something like
<th ng-click="sort('LastName')">Last Name</th>
My sort method looks like
scope.sort = function (columnName) {
if (angular.isDefined(scope.filter)) {
if (scope.filter.SortColumn == columnName) {
scope.filter.SortColumn = columnName;
scope.filter.SortDirection = scope.filters.SortDirection == "Asc" ? "Desc" : "Asc";
} else {
scope.filter.SortColumn = columnName;
scope.filter.SortDirection = "Asc";
}
}
};
And my ng-repeat looks as follows
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn">
How can I get the SortDirection to factor into the orderBy?
To simply reverse you'd change it to this:
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : true">
It'd be best if you used a boolean in your controller, but this should work too:
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : filter.SortDirection === 'Desc'">
And just for fun, here's how I do sorting with filtering in my tables.
Controller:
$scope.search = { query: ''};
$scope.sort = { field: 'defaultField', descending: true};
$scope.order = function(newValue) {
if(newValue === $scope.sort.field) {
$scope.sort.descending = !$scope.sort.descending;
} else {
$scope.sort = {field: newValue, descending: false};
}
};
$scope.filteredDocuments = function() {
var a = $filter('filter')($scope.documents, {$:$scope.search.query});
var b = $filter('orderBy')(a, $scope.sort.field, $scope.sort.descending);
return b;
};
A search box for filtering:
<input type="text" ng-model="search.query">
A column header:
<th nowrap>
<a href ng-click="order('size')">Size </a>
<i ng-show="sort.field === 'size' && !sort.descending" class="fa fa-sort-amount-asc"></i>
<i ng-show="sort.field === 'size' && sort.descending" class="fa fa-sort-amount-desc"></i>
</th>
The row binding:
<tr ng-repeat="d in filteredDocuments()" >
A simplified version of the above answer:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')" >Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:mySortOrder">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.sorts={};
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
if(x in $scope.sorts) {
$scope.sorts[x]=!$scope.sorts[x];
} else {
$scope.sorts[x]=false;
}
$scope.mySortOrder=$scope.sorts[x];
}
});
</script>
</body>
</html>
I am completely new to AngularJS. Here is my HTML code
<div ng-controller="DateRangeCtrl">
<div class="container">
<div class="form-horizontal">
<input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt1" is-open="opened1" max="maxFromDate" ng-change="setMinToDate()"/>
<button class="btn btn-sm" ng-click="open1($event)"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="form-horizontal">
<input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-change="filterDateAdded()"/>
<button class="btn btn-sm" ng-click="open2($event)"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<p><strong>Selected From Date: </strong> {{dt1 | date:'mediumDate'}}</p>
<p><strong>Selected To Date: </strong> {{dt2 | date:'mediumDate'}}</p>
</div>
<hr />
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction ">
<td>{{item.ID}}</td>
<td>{{ parseDate(item.dateAdded) | date:'longDate'}}</td>
</tr>
</tbody>
</table>
</div>
The following is my angular code:
testApp.config(function (datepickerConfig, datepickerPopupConfig) {
datepickerConfig.showWeeks = false;
datepickerPopupConfig.showButtonBar = false;
});
testApp.controller('DateRangeCtrl', function($scope) {
$scope.items = [
{ID: "1", dateAdded: "01-04-2013"},
{ID: "2", dateAdded: "12-01-2013"},
{ID: "3", dateAdded: "12-31-2013"},
{ID: "4", dateAdded: "01-12-2014"},
{ID: "5", dateAdded: "03-04-2014"}
];
$scope.parseDate = function(input){
var parts = input.split('-');
var newParts = new Date(parts[2], parts[0]-1, parts[1]); // Note: months are 0-based
return newParts;
}
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = true;
};
$scope.maxFromDate = new Date();
$scope.maxToDate = new Date();
$scope.setMinToDate = function (){
$scope.dt2 = null;
$scope.minToDate = $scope.dt1;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
});
How can i filter rows based on selected dates? For e.g. if i select "01/01/2014" in the "From" datePicker then i should be able to see all the rows whose "Date Added" column has value more than "January 1, 2014". The output will be rows with ID: 4 and 5.
It should behave the literal equivalent way when the "To" datePicker is selected
Please help me out. i'm stuck!
Update:
HTML
<tr ng-repeat="item in items | filter:dateFilter ">
JS
$scope.dateFilter = function (item) {
return (item.dateAdded < $scope.dt2);
};
Am i doing anything wrong? It still doesn't work....
By some hit n trial method, i eventually got it right. The problem was the "item.dateAdded" string had to be converted to Date object. Solution is adding the following piece of code in the js file:
$scope.filterDateAdded = function (){
if($scope.dt1 != null)
{
$scope.dateFilter = function (item) {
return ($scope.parseDate(item.dateAdded) >= $scope.dt1 && $scope.parseDate(item.dateAdded) <= $scope.dt2);
};
}
};
Cheers!
Change your code like this
<input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-model="search" ng-change="filterDateAdded()"/>
<tr ng-repeat="item in items | filter:dateFilter">
$scope.filterDateAdded=function()
{
$scope.dateFilter = function () {
var result=[];
for(var i in $scope.item)
{ if($scope.item[i].dateAdded >$scope.search)
{
result.push($scope.item[i]);
}
}
return result;
};
}