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.
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
1. java script which is called
this.changeRole=function(user){
alert(user)
if(user=='Admin' || user=='Subject Manager'){
$scope.role=false;
}
else{
$scope.role=true;
}
}
2. html from that function is called
<div class="form-group">
<label class="col-sm-2 control-label">Role
<span class="text-danger">*</span>
</label>
<div class="col-sm-9">
<select class="form-control" ng-model="uc.newuser.role"
ng-change="uc.changeRole(uc.newuser.role)" required >
<option ng-repeat="role in uc.roles" ng-value="user.name" >
{{role}}
</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>E-mail ID</th>
<th>Mobile</th>
<th>User type</th>
<th ng-if="role=='Admin'">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.role.toString()}}</td>
<td ng-if="role=='Admin'">
<button class="btn btn-circle btn-gout1"
ng-click="uc.editUser(user.id)"
data-toggle="modal"
data-target=".bs-register-modal-md">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-circle btn-gout"
ng-click="uc.deleteUser(user.id)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
After ng-change the column with ng-if is hiding.
ng-if should be checked like
<td ng-if="role">
Not exactly sure on what actually is required. However, this is what I think:
The select dropdown decides the role and based on the role the actions should appear on the following set of users.
You could directly use ng-model to do the same.
var app = angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.selectedRole = 'ADMIN'
$scope.roles = ['ADMIN','Subject Manager','Student'];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
<div class="form-group">
<label class="col-sm-2 control-label">Role
<span class="text-danger">*</span>
</label>
<div class="col-sm-9">
<select class="form-control" ng-model="selectedRole"required >
<option ng-repeat="role in roles" value="{{role}}">
{{role}}
</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>E-mail ID</th>
<th>Mobile</th>
<th>User type</th>
<th ng-if="selectedRole === 'ADMIN'">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.role.toString()}}</td>
<td ng-if="selectedRole==='ADMIN'">
<button class="btn btn-circle btn-gout1"
ng-click="uc.editUser(user.id)"
data-toggle="modal"
data-target=".bs-register-modal-md">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-circle btn-gout"
ng-click="uc.deleteUser(user.id)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</body>
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);
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>
I'm trying to use st-safe-src with Smart-Table with ajax data, but clearly I'm doing something wrong. My data is showing in the table, but search, sort, and filter don't work. For some reason Plunker isn't loading for me today, which is unfortunate as that's where several examples are.
My code is below any suggestions would be appreciated.
TransferController.js
angular
.module("RssTransfers")
.controller("TransferController", ["$http", "$filter", function($http, $filter) {
var self = this;
self.all = [];
function getTransfers() {
$http
.get("http://localhost:3000/transfers/api")
.then(function(response) {
self.all = response.data.transfers;
self.collection = [].concat(self.all);
console.log(self.collection)
console.log(self.all)
})
}
getTransfers();
}]);
table.html
<div class="container">
<div ng-controller="TransferController as transfers">
<table st-table="collection" st-safe-src="transfers" class="table striped highlight">
<thead>
<tr>
<th class="table-head" id="period-col" st-sort="period">Period</th>
<th class="table-head" st-sort="uploadDate">Upload Date</th>
<th class="table-head" st-sort="uploadDate">Transfer Code</th>
<th class="table-head" st-sort="vendor">Vendor</th>
<th class="table-head" colspan="2" st-sort="description">Description</th>
<th class="table-head" st-sort="amount">Amount (SSP)</th>
</tr>
<tr>
<tr>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
<th>
<input st-search="period" colspan=".75" placeholder="search by period" class="input-sm form-control" type="search"/>
</th>
<th>
<input st-search="uploadDate" placeholder="search by upload date" class="input-sm form-control" type="search"/>
</th>
<th>
<input st-search="transferCode" placeholder="search by transfer code" class="input-sm form-control" type="search"/>
</th>
<th>
<input st-search="vendor" placeholder="search by vendor" class="input-sm form-control" type="search"/>
</th>
<th colspan="2">
<input st-search="description" placeholder="search by description" class="input-sm form-control" type="search"/>
</th>
<th>
<input st-search="amount" placeholder="search by amount" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody id="table-cell">
<tr ng-repeat="data in transfers.all">
<td class="table-cell" colspan=".75">{{ data.period }}</td>
<td class="table-cell">{{ data.uploadDate | date }}</td>
<td class="table-cell">{{ data.transferCode }}</td>
<td class="table-cell">{{ data.vendor }}</td>
<td class="table-cell" colspan="2">{{ data.description }}</td>
<td class="table-cell">{{ data.amount }}</td>
</tr>
</tbody>
</table>
</div>
</div>
You used invalid variable names in the top of the table but a correct one in the ng-repeat
Change:
<table st-table="collection" st-safe-src="transfers">
To
<table st-table="transfers.collection" st-safe-src="transfers.all" >