I am relatively new to JavaScript
angular
.module('MainView', ['Utils','ngMaterial'])
.controller('MainCtrl', ['$scope','$timeout','$q','$log' ,function($scope,$timeout,$q,$log) {
var self = this;
self.keychain = null;
self.keychain = [{description:'some description',couponCode:37678 },{description:'some text',couponCode:23478,unitPrice:300.99,totalCost:300.99,actions: 'move' }]
}]);
<div ng-app="MainView" ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th>Description</th>
<th>Coupon Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.stockList track by $index" class="item--{{$index}}">
<td>{{$index + 1}}
</td>
<td class="mdl-textfield__input">
<input value="{{item.qty}}" size="3" maxlength="3" class="" type="number" required />
</td>
<td>{{item.couponCode || 'n/a'}}</td>
<td>{{item.description || 'n/a'}}</td>
<td> <button class="mdl-button mdl-js-button ">
<i class="material-icons">delete</i>
</button></td>
</tr>
</tbody>
</table>
</div>
and angular. I am trying to get a blank scroll-able table which i can then enter data into.How can i do this using ng-repeat.I have been on this for several hours. Any help will be appreciated. thanks.
You should initialize your stocklist with empty values
vm.stockList = [
{qty: null, couponCode: null, description: null},
{qty: null, couponCode: null, description: null},
]
I can not run your code snippet and you are using stockList <--!--> keychain.
So the first thing i see is that your input uses value="{{item.qty}}" whereas you should use ng-model="item.qty"
see https://docs.angularjs.org/api/ng/directive/input
Here it's working. You missed out angular file. And so many unwanted codes.
angular.module('MainView', [])
.controller('MainCtrl', ['$scope' ,function($scope) {
var self = this;
self.keychain = null;
self.keychain = [{description:'some description', couponCode:37678 },
{description:'some text',couponCode:23478,unitPrice:300.99,totalCost:300.99,actions: 'move' }];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="MainView">
<table ng-controller="MainCtrl as vm">
<thead>
<tr>
<th>Description</th>
<th>Coupon Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.keychain" class="item">
<td>{{$index + 1}}
</td>
<td class="mdl-textfield__input">
<input size="3" maxlength="3" class="" type="number" required />
</td>
<td>{{item.couponCode}}</td>
<td>{{item.description}}</td>
<td> <button class="mdl-button mdl-js-button ">
<i class="material-icons">delete</i>
</button></td>
</tr>
</tbody>
</table>
</div>
Related
Why am I getting same value in all rows of table. Table has rows and when row is clicked another row opens with additional information and every row contains same data like last clicked row. Probably it is cos I am saving data in same object, but I really don't know how to solve it. I am getting data from json files with factor, so you don't get confused, where my data is coming from. Here is the code. Thank you very much.
'use strict';
angular.module('sbAdminApp')
.controller('TreeTableCtrl', TreeTableCtrl);
function TreeTableCtrl($scope, $http, factor) {
$scope.nonCollapsedUser = [];
var getUsers = function () {
factor.getUse().then(function (response) {
$scope.users = response.data;
});
};
getUsers();
var getUsersInfo = function () {
factor.getChi().then(function (response) {
$scope.child = response.data;
console.log($scope.child);
});
};
getUsersInfo();
$scope.togglePerson = function (index) {
$scope.nonCollapsedUser.push(index);
$scope.newObj=$scope.child[index];
console.log($scope.newObj);
};
$scope.hidePerson = function (index)
{
for(var i=0; i<$scope.nonCollapsedUser.length; i++){
if($scope.nonCollapsedUser[i] === index){
$scope.nonCollapsedUser.splice(i, 1);
}
}
};
}
<div class="panel panel-default" style="background: #fcf8e3">
<div class="panel-body">
<table st-safe-src="leads" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody ng-repeat="user in users track by $index">
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>
<button ng-if="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
<i class="fa fa-arrow-down"></i></button>
<button ng-if="nonCollapsedUser | contains:$index" class="btn" ng-click="hidePerson($index)"><i
class="fa fa-arrow-up"></i></button>
</td>
</tr>
<tr ng-if="nonCollapsedUser | contains:$index">
<div>
<td>{{newObj.address}}</td>
<td>{{newObj.mobNumb}}</td>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
According to your description,
I assume your users, child arrays like this
$scope.users =[
{"id":1,"name":"Mirko","lastName":"Spriko"},
{"id":2,"name":"Pero","lastName":"Peric"},
{"id":3,"name":"Marko","lastName":"Prezime"}
];
$scope.child =[
{"address":"Address1","mobNumb":"47423756324"},
{"address":"Address2","mobNumb":"73454635545"},
{"address":"Address3","mobNumb":"87464343648"}
];
First you need to map child to users
angular.forEach($scope.users, function(value,key){
value.child =$scope.child[key];
});
Now you can achive your target
<table st-safe-src="leads" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="user in users" >
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>
<button ng-show="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
<i class="fa fa-arrow-down"></i>veiw</button>
<button ng-show="nonCollapsedUser.indexOf($index) > -1" class="btn" ng-click="hidePerson($index)"><i
class="fa fa-arrow-up"></i>hide</button>
</td>
</tr>
<tr ng-show="nonCollapsedUser.indexOf($index) > -1">
<td></td>
<td>{{user.child.address}}</td>
<td>{{user.child.mobNumb}}</td>
<td
</tr>
</table>
This is working JSFiddle
i have following code my data does not sort according to datetime please help me this i am using <div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div> i think its show problem , check below code i have more then 30 records that's why sorting problem
<table st-table='displayedAssets' st-safe-src="assetController.assetsData" class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer">
<thead>
<tr>
<td colspan="9">
<ul class="list-inline list-unstyled">
Search
<li><input st-search="city" placeholder="City" class="input-sm form-control" type="search" /></li>
<li> <input st-search="region" placeholder="Region" class="input-sm form-control" type="search" /></li>
<li><input st-search="medium" placeholder="Medium" class="input-sm form-control" type="search" /></li>
</ul>
</td>
</tr>
<tr>
<th>City</th>
<th>create date</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedAssets | orderBy:'created_date':true ">
<td>{{ row.city }}</td>
<th>{{ row.created_date }}</th>
<td>{{ row.location }}</td>
<td>
<button type="button" title="Delete" ng-click="assetController.showConfirm($event, row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="text-right">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
angularjs js
this.$http.get('/api/assets')
.then(response => {
this.assetsData = response.data;
this.socket.syncUpdates('asset', this.assetsData);
});
Date sorting
let dateTimeArr = ["11/14/13 12:07","12/13/11 01:07","09/09/12 09:04","08/30/14 19:05","04/24/04 16:03","08/15/16 10:02","12/13/11 02:07"]
let sortedArr = dateTimeArr.sort((a,b)=>{
return new Date(a).getTime() - new Date(b).getTime();
})
console.log(sortedArr);
When I'm adding new product to a product list its not working. So the products get loaded well but the ng-click function does not getting called. (The alert I put in the addProduct function is not executed).
HTML
<div ng-controller="ProductController as ProductCtrl">
Zoeken <input type="text" ng-model="search" placeholder="Search" />
<div>
Filter Type
<button ng-repeat="cat in categories" ng-click="filterProductsByCategory(cat)">{{cat}}</button>
</div>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>ID</th>
<th>Product</th>
<th>Type</th>
<th>Price</th>
<th>Toevoegen</th>
</tr>
<tr ng-repeat="product in ProductCtrl.products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.type}}</td>
<td>{{product.price}}</td>
<td></td>
</tr>
<tr><td></td>
<td><input type="text" name="newProduct.name" ng-model="productCtrl.newProduct.name"></td>
<td><input type="text" name="newProduct.price" ng-model="productCtrl.newProduct.price"></td>
<td><input type="text" name="newProduct.type" ng-model="productCtrl.newProduct.type"></td>
<td><a href ng-click="productCtrl.addProduct()">Product {{productCtrl.newProduct.name}} toevoegen</a></td></tr>
</table>
Any help would appreciated.
The controller:
app.controller('ProductController', function(productService) {
var that = this;
productService.getProducts().success(function(data) {
that.products = data;
});
this.newProduct = "";
this.addProduct = function() {
that.products.push(this.newProduct);
window.alert(that.products);
this.newProduct = "";
};
});
Its a typo, your controller alias name is ProductCtrl not productCtrl, Additionally you need to change your ng-model's to correct the same thing
Replace productCtrl to ProductCtrl will fix your issue.
<tr>
<td>
<input type="text" name="newProduct.name" ng-model="ProductCtrl.newProduct.name"/>
</td>
<td>
<input type="text" name="newProduct.price" ng-model="ProductCtrl.newProduct.price"/>
</td>
<td>
<input type="text" name="newProduct.type" ng-model="ProductCtrl.newProduct.type"/>
</td>
<td>
<a href ng-click="ProductCtrl.addProduct()">
Product {{productCtrl.newProduct.name}} toevoegen
</a>
</td>
</tr>
I am creating a form with an append new row function. I can create a new row dynamically but my problem is I can't display the initial value in my textboxes.
Here's some of my code:
<div class="row" ng-app="product_list">
<div class="table-responsive" ng-controller="productList">
<table class="table table-bordered table-hovered">
<thead>
<tr>
<td class="text-left">Product Name</td>
<td class="text-left">Quantity</td>
<td class="text-left">Price</td>
<td class="text-left">Subtotal</td>
<td class="text-center"><button type="button" class="btn btn-default" ng-click="addNewRow()">Add Row</button></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in product.item">
<td class="text-left">
<input type="text" ng-model="item.name" class="form-control" />
</td>
<td class="text-center">
<input type="number" ng-model="item.quantity" class="form-control" />
</td>
<td class="text-right">
<input type="number" ng-model="item.price" class="form-control text-right" value="{{ value.price }}" />
</td>
<td>{{ item.price * item.quantity | currency }}</td>
<td class="text-center">
<button type="button" class="btn btn-danger" ng-click="removeRow($index)">Remove</button>
</td>
</td>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<td colspan="3" class="text-left">
<label>Subtotal: </label>
<input type="text" class="form-control text-right" value="{{ total() | currency }}" readonly />
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The JS:
<script type="text/javascript">
var appList = angular.module('product_list', []);
appList.controller('productList', function($scope){
$scope.product = {
item: [
{
product_name: 'Test name 1',
quantity: 5,
price: 99.9,
}
]
};
$scope.addNewRow = function() {
$scope.product.item.push({
product_name: '',
quantity: 1,
price: 0
});
}
$scope.removeRow = function(index) {
$scope.product.item.splice(index, 1);
}
$scope.total = function() {
var total = 0.00;
angular.forEach($scope.product.item, function(item){
total += item.quantity * item.price
});
return total;
}
});
</script>
Here's the plnkr: http://plnkr.co/edit/6vAVPw?p=preview
You have the variables mismatched, in here you use value as the repeated item:
<tr ng-repeat="value in product.item">
But then you use the item as item, so just change your value in product.item to item in product.item:
<tr ng-repeat="value in product.item">
Also notice on line 44 of the HTML your have invalid html, change the </td> to </tr>
The last small thing to notice is that your item variable's name is called product_name in your objects, but you assign the item.name to your ng-model. So also update your first textfield to ng-model=item.product_name
Updated Plunker
This is because your use different variable name in ng-repeat and ng-model
<tr ng-repeat="value in product.item">
Since you use ng-model="item.name", just replace value with item
like this
<tr ng-repeat="item in product.item">
I'm a real AngularJS and JS noob who is trying to make an input appear when a user double clicks on an element however, I can't get it to work. Currently I have this error...TypeError: Cannot set property 'editing' of undefined
Here's my code...
var reportsControllers = angular.module('vdApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
reportsControllers.controller('ApplicantCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('http://myurl.com').success(function(data)
{
$scope.applicants = data;
});
angular.forEach($scope.applicants, function() {
editing: false;
});
$scope.orderProp = 'dob';
$scope.editApplicant = function(applicant) {
applicant.editing = true;
};
$scope.doneEditing = function(applicant) {
applicant.editing = true;
};
}]);
and my HTML/blade template...
<div ng-app="vdApp" ng-controller="ApplicantCtrl">
<div class="input-group spacer-bottom-2x">
<span class="input-group-btn"><button class="btn btn-default btn-lg" type="button">Filter:</button></span>
<input class="form-control input-lg" ng-model="query" />
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="15%">Name</th>
<th width="10%">DOB</th>
<th width="5%">CV</th>
<th width="25%">Tel</th>
<th width="25%">Email</th>
<th width="10%">Post Town</th>
<th width="20%">Interest</th>
<th width="10%">Applied</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in applicants| filter: query | orderBy: orderProp">
<td>[[ app.fname ]] [[ app.surname ]]</td>
<td>[[ app.dob ]]</td>
<td><div ng-if="app.cv != ''">View</div></td>
<td >
<span ng-hide="applicant.editing" ng-dblclick="editApplicant(applicant)">[[ app.tel ]]</span>
<div class="form-group" ng-show="applicant.editing" ng-model="app.id" ng-blur="doneEditing(applicant)" autofocus>
<input class="form-control input-lg" ng-model="query" />
</div>
</td>
<td>[[ app.email ]]</td>
<td>[[ app.postTown ]]</td>
<td>[[ app.page_title ]]</td>
<td>[[ app.created_at ]]</td>
</tr>
</tbody>
</table>
</div>
</div>
Can anyone help me and tell me what I'm doing wrong?
Thanks!
You declare your repeater as ng-repeat="app in applicants" but then try ng-dblclick="editApplicant(applicant) and ng-show="applicant.editing".
applicant does not exist - you should be using your repeater loop variable app instead.