I'm populating my view as follow :
<tbody ng-repeat="user in users">
<tr>
<td class="numeric">{{user.name}}</td>
</tr>
</tbody>
I'm trying to access the data from user.name inside my controller so that I end up with an array of without any action from the user:
$scope.array = [user.name1,user.name2,user.name3,...]
I've been trying to do something like this but it's not working:
<tbody ng-repeat="user in users">
<tr>
<td class="numeric" ng-model={{array[user.index] = user.name}}>{{user.name}}</td>
</tr>
</tbody>
I need to get the data this way because i'm using data from minimongo on the client and can't access it before the page is loaded.
edit controller :
angular.module('App').controller('Users', function ($scope,$stateParams) {
$scope.helpers({
Users: () => {
return Users.find({_id:$stateParams.ID.toString()});
}
});
});
Related
I am trying to access a the data in a json object using angular but i finding it difficult to this at the moment and hopefully you can help me here.
so i have a function in my controller like this:
var vm = this;
vm.getData = getData;
vm.data = [];
function getData() {
var promise = appService.getAll(vm.query);
promise.then(function(response) {
vm.data = response.data,
console.log(vm.data);
},
function(error) {
$log.error("an error here", error);
});
}
and my view goes something like this:
<div>
<table class="table">
<tr >
<th> Department</th>
</tr >
<tr ng-repeat="n in vm.data">
<td>{{n.sectionName}} </td>
</tr>
</table>
</div>
Everything works .. i retrieve my json object as required .. but its just accessing them is where i am having in issue as the above context in my view is not dispplayed ..
so in my example above i am trying to acess a json with the heaser of "sectionName" and displaying it in my view.
here is a visual of of the json object in my console ...
Thank you for your time
If results is the data you need to display, then you should adjust your markup to be this:
<tr ng-repeat="n in vm.data.results">
<td>{{n.sectionName}} </td>
</tr>
You are looping over the object itself. Instead, you have to loop over the results array inside the object.
<div>
<table class="table">
<tr >
<th> Department</th>
</tr >
<tr ng-repeat="n in vm.data.results">
<td>{{n.sectionName}} </td>
</tr>
</table>
</div>
I built a function that counts how many times the user clicked on his name in the users table, but the ng-click doesn't triggers the function.
HTML code:
<tr ng-repeat="user in Users.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
<td class="col-lg-1" ng-click="tapName(user.userName)">{{user.userName}}</td>
<td class="col-lg-1">{{user.PassWord}}</td>
<td class="col-lg-1">{{user.Name}}</td>
<td class="col-lg-1">{{user.LastName}}</td>
<td class="col-lg-1">{{$index}}</td>
<td class="col-lg-1">{{user.countConnect}}</td>
<td class="col-lg-1">{{user.countPaging}}</td>
<td class="col-lg-1">{{user.countOrder}}</td>
<td class="col-lg-1">{{user.countTapName}}</td>
</tr>
AngularJS function code:
$scope.tapName = function(name){
if($scope.User == name){
$scope.User.countTapName ++;
}
};
There is no User in the scope. The scope contains Users, which is an array of users. You should not pass the user name as argument. You should pass the user itself:
ng-click="tapName(user)"
$scope.tapName = function(user){
user.countTapName++;
};
Can't figure out how to dynamically add a new model whenever a new row is added to the page. For example, the input select box ng-model= infos.rigBonusInfo.rigName is used for all select box I've added to the page. I would like to have a different model attached to a each select inputs. I tried using ng-model= infos.rigBonusInfo.rigName[rigBonus] but it doesn't work for the rates as the same model gets attachedto each rate field.
Pretty much what I want to do is to bind a new model whenever a new row gets pushed into the array.
Currently, I have a nested table which is the following:
<div class="col-lg-5">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Rig</th>
<th>Rig Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rig in rigs">
<td>{{ $index + 1 }}</td>
<td>{{ rig.name }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-5">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Bonus Name</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bonus in create.rigBonusRates">
<td>{{ bonus.rateName }}</td>
<td>{{ bonus.rate }}</td>
</tr>
</tbody>
</table>
</div>
<table>
<thead>
<tr>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rigDate in rigDateList track by $index">
<td><input ui-date="datepickerOptions" ng-model="date" /></td>
<td>
<table>
<thead>
<tr>
<th>Rig</th>
<th>Rate1</th>
<th></th>
<th>Rate2</th>
<th></th>
<th>Rate3</th>
<th></th>
<th>Rate4</th>
<th></th>
<th>Comments</th>
</tr>
</thead>
<tr ng-repeat="rigBonus in rigBonusList track by $index">
<td><select ng-options="rig as rigs.indexOf(rig) + 1 for rig in rigs" ng-model="infos.rigBonusInfo.rigName[rigBonus]" ></select></td>
#for (var i = 1; i < 5; i++)
{
<td><select ng-options="rigBonus.rateName for rigBonus in create.rigBonusRates" ng-model="infos.rigBonusInfo.rate#(#i)"></select></td>
<td><input type="text" ng-disabled="infos.rigBonusInfo.rate#(#i).rateName != 'Special' " ng-model=infos.rigBonusInfo.rate#(#i).rate /></td>
}
<td><input ng-model="info.rigBonusInfo.comments" /></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<div>
<button type="button" ng-click="add()">Add</button>
<button type="button" ng-click="addDate()">Add Date</button>
</div>
My current controller has the following:
angular.module('RigBonus').controller('rigCreateController', ['$scope', '$http', 'PayPeriodService', 'RigLegendService',
function ($scope, $http, PayPeriodService, RigLegendService, RigBonusRateService) {
$scope.rigs = RigLegendService.getRigLegend();
$scope.datepickerOptions = {
orientation: 'top',
startDate: PayPeriodService.getStartDate(),
endDate: PayPeriodService.getEndDate()
};
$http({ method: 'GET', url: '/Home/CreateData' }).success(function (data) {
$scope.create = data;
$scope.infos = {
rigBonusInfo: {
rigName: $scope.rigs[0],
rate1: $scope.create.rigBonusRates[0],
rate2: $scope.create.rigBonusRates[0],
rate3: $scope.create.rigBonusRates[0],
rate4: $scope.create.rigBonusRates[0],
comment: ""
}
};
$scope.add = function () {
$scope.rigBonusList.push();
};
$scope.addDate = function(){
$scope.rigDateList.push("");
};
});
$scope.rigBonusList = [$scope.rigBonusInfo];
$scope.rigDateList = [];
$scope.submit = function () {
$http.post('/Home/Create', {model: "testing"} );
};
}]);
I figured out my issue. My problem was that I was not sure how to generate a new object when a new row of controls are added. Think I should have put something on fiddleJS to help people visualize it better. As a static model was used ($scope.infos) as ng-model, the same model was used for two different controls which I don't want. I want all my controls to be unique.
The fix was to create the object I had in mind which is the following:
$scope.rigDateList = [{
date: "",
rigBonusList: [{}]
}];
So it is an array of objects where the object contains a date and another array of objects.
When I want to push new objects to the inside array which I didn't know I could just create objects like this at the time. I was trying to figure out a way to dynamically create new models ng-model could by declaring them in the controller. I use the following function:
$scope.rigDateList[$scope.rigListIndex].rigBonusList.push({
rigName: "",
rate1: "",
rate2: "",
rate3: "",
comments: ""
});
I also didn't know that I could use elements inside the array from ng-repeat. In the following case, it is rigBonus that I could have used as a model instead of infos model.
<tr ng-repeat="rigBonus in rigDate.rigBonusList track by $index">
<td><select ng-options="rig as rigs.indexOf(rig) + 1 for rig in rigs" ng-model="rigBonus.rigName"></select></td>
and when I want to push to the outside array I use the following:
$scope.rigDateList.push({
date: "",
rigBonusList: [""]
});
$scope.rigListIndex = $scope.rigListIndex + 1;
I use an index to keep track of which object I'm in.
A more closest question and answer is that:
Ng-repeat with dynamic ng-model on input not working
please, take a look.
This is the problem that I'm coming across...
I am returning an http to display some data in a repeat..
$scope.search = function() {
$http.get("attemptsJSON.php?q="+$scope.svalue)
.success(function(response) {
$scope.attempts = response;
});
}'
That data I have a click function to return even more data. But that data is determined on the previous data which has a link to it like this.
$scope.getAllAtt = function(a) {
$http.get("allAttemptsJSON.php?a="+a)
.success(function(response) {
$scope.allAttempts=response;
});
}
the problem is that returned data is showing on every instance of my intial repeat and I only want it to show below the one that is clicked. I looked at so many different possibilities like Template caching, but I have no idea how to go about this I am somewhat new to Angular and I think I need to use a directive but directives confuse me. Please help.
Here is the HTML
<tr ng-repeat-start="att in attempts">
<td class="expand-col" ng-click="getAllAtt(att.action_id)"><i class="fa fa-plus-circle"></i></td>
<td>{{att.cust_no}}</td>
<td>{{att.emp_name}}</td>
<td>{{att.attemptdt}}</td>
<td>{{att.note}}</td>
<td>{{att.callstatus}}</td>
</tr>
<tr ng-repeat-end ng-repeat="x in allAttempts">
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{x.note}}</td>
<td></td>
</tr>'
If you want a set of values that only belong to one item in your repeating items, then you should assign those to your repeating item, not to the whole scope:
<tr ng-repeat-start="att in attempts">
<td class="expand-col" ng-click="getAllAtt(att)">
<i class="fa fa-plus-circle"></i></td>
<td>{{att.cust_no}}</td>
<td>{{att.emp_name}}</td>
<td>{{att.attemptdt}}</td>
<td>{{att.note}}</td>
<td>{{att.callstatus}}</td>
</tr>
<tr ng-repeat-end ng-repeat="x in att.allAttempts">
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{x.note}}</td>
<td></td>
</tr>
$scope.getAllAtt = function(attempt) {
$http.get("allAttemptsJSON.php?a=" + attempt.action_id)
.success(function (response) {
attempt.allAttempts = response;
});
};
This includes some simplifications since I don't have access to your HTTP sources or CSS, but it demonstrates the concept:
http://jsfiddle.net/femt86u9/
I'm new to Knockout js and need some advice. What I am trying to do (the correct way) is have orders listed in a grid and a "production" button that when it is click, will show only the production objects that have matching id's to the order id. I'm trying to wrap my head around Knockouts binding, but I think I am over thinking things.
right now I have 2 objects Order and Production with are observable arrays filled with observables. Order has value of orderId and Production have value of prodId that I am checking for a match. I'm now wondering if I should not make this on object with mutli-dimensional array. Would it be easier to show selected data that way?
here is an example of the initial arrays
var initProduction = [
new Production({
proId:"183175",
pType:"Art TIme",
startTime:"11:20",
stopTime:"11:50",
totalTime:"",
by :"MJ"
})
var initData = [
new Order({
date:"06-09-2014",
orderId:"183175",
name:"Columbus Africentric",
dateRec:"05-23-2014",
rushDate:"",
totalQty:55,
parts:"1",
auto:"No",
type:"Local",
})
]
so should I combine into a multidimensional array? And if so, how would I do that? And how would I create a click event to show related data in another table showing only the production info.
I hope this makes sense and someone can help me. I apologize for my ignorance.
here is a stripped down version of my html bindings
<table>
<tbody data-bind="foreach:filteredOrders">
<tr>
<td>
<label class="read" data-bind="text:orderId, visible:true" />
</td>
<!-- controls -->
<td class="tools">
<button class="button toolButton" data-bind="click: $root.showSummary">Show Production</button>
</td>
</tr>
</tbody>
</table>
<h3>Production Summary</h3>
<table class="ko-grid" id="menu" >
<tbody data-bind="foreach:filteredProds">
<tr>
<td>
<div>
<label class="read" data-bind="text:proId, visible:true" />
</div>
</td>
</tr>
</tbody>
</table>
I would just have an orders array and then link the production object to the order.
var model = {
orders: [
{
date:"06-09-2014",
orderId:"183175",
name:"Columbus Africentric",
dateRec:"05-23-2014",
rushDate:"",
totalQty:55,
parts:"1",
auto:"No",
type:"Local",
production: {
proId:"183175",
pType:"Art TIme",
startTime:"11:20",
stopTime:"11:50",
totalTime:"",
by :"MJ"
}
},
{
date:"06-09-2014",
orderId:"183176",
name:"Angle Africentric",
dateRec:"05-23-2014",
rushDate:"",
totalQty:55,
parts:"1",
auto:"No",
type:"Local"
}
]
};
In the above json the second order doesn't have a production object.
Then in the viewModel I would use a computed which will return the orders depending on if all orders or only production orders should be shown. I've created a toggle here which is linked to the button.
var ViewModel = function (model) {
var self = this;
self.orders = $.map(model.orders, function (order) { return new Order (order); });
self.toggleProductionMode = function (order) {
order.showProductionOrder(!order.showProductionOrder());
};
};
var Order = function (order) {
var self = this;
ko.utils.extend(self, order);
self.showProductionOrder = ko.observable(false);
};
View:
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: orders">
<tr>
<td data-bind="text: orderId"></td>
<td data-bind="text: name"></td>
<td data-bind="if: production"><button data-bind="click: $root.toggleProductionMode">Toggle Production Orders</button>
</td>
</tr>
<tr data-bind="visible: showProductionOrder, with: production">
<td colspan="3">
<table>
<tr>
<th>proId</th>
<th>pType</th>
</tr>
<tr>
<td data-bind="text:proId"></td>
<td data-bind="text:pType"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Demo here: http://jsfiddle.net/X3LR6/2/