AngularJS data-binding between two arrays - javascript

I have table and a select control:
<table>
<tr ng-repeat="object in objects" ng-click="setCurrentSelectObject(object)">
<td>{{object.id}}</td>
<td>{{object.member_id}}</td>
<td>{{object.description}}</td>
</tr>
</table>
<select ng-options="m for m in members" ></select>
members and objects are some arrays that are loaded using $resource by AngularJS.
object.member_id is a foreign key value to members.id , I want to bind object.member_id with the selected member.id in the select control.
How do I do that ?
Edit:
My approach until now:
I use ng-model=selectedMember inside the select control, and that gives me a member array, which is a complex structure from which I only need member.id and on-change="changedMember".
Inside changeMember I have the current selected object from the table to which I do : currentObject.member_id = selectedMember.
But this is a workaround, isn 't there a more ng-model-ish way of doing this ?

Related

collect multiple data from view - AngularJS

Question
I want to retrieve multiple data from a view and store it into a key:value array in the controller.
HTML
<div ng-repeat="element in elements">
<input type="number" id = "{{element.id}}">
</div>
The array should contain element.id as the key and the value of the input as the value.
I checked angular docs but not found anything helpful to perform this task.
Thanks in advance !

AngularJs, how to assign dynamic model name

I wanna create a dynamic table (say 5X5 ) containing a checkbox matrix, and assign each checkbox with a model,
<tr ng-repeat="parentItem in Items>
<td>{{parentItem.name}}</td>
<td ng-repeat="childItem in Items>
<input id="{{ parentItem.id }}_{{childItem.id}}" type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="data['{{ parentItem.id }}_{{childItem.id}}']">
</td>
</tr>
In the controller, a data object is defined as $scope.data={};
so what I expect is that each checkbox will end with a model in a form like data['1_3'] or data['2_4'],
I tried many ways but the model just could not be bound correctly.
Actually, tried this way
data[parentItem.id],
it worked, but no idea how to concatenate two dynamic items.
I didn't test it but ng-model="data[parentItem.id + '_' + childItem.id]" should work.
Generally for ngModel you don't need to use {{}}

Angular ng-model filter with a predefined word

From the angular example page
I've tried this example and works
Search: <input ng-model="searchText">
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
But I want with angular define a string within HTML
I need such a construction for my website were products frequely has a price change. These prices I grab from a database. Depend on which webpage I am i want to show a price from the database
something like:
<ng-model="searchText = John">
So without having an input.
To set a value for searchText, just initialize it in your controller:
$scope.searchText = 'John';
Otherwise, you can use ng-init, but this should really be reserved for scenarios that require initialization in the view:
<div ng-init="searchText='John'">{{searchText}}</div>

How to fix undefined property error in knockoutjs

Most of the time i get some error for 'undefined' property in knockout. I found a solution for the same on stackoverflow answer. It is effective for simple binding, but my question is that how would i use this technique for 'foreach' binding like i have tried like
Demo here
below code is not working
<table>
<tbody data-bind="foreach: model.mappings">
<tr>
<td>
<select data-bind="options:mappings.variableList, optionsText:'Key',optionsValue:'Value', value:mappings.selectedVariable>
</select>
</td></tr></tbody></table>
But below code is working
<table>
<tbody data-bind="foreach:mappings">
<tr>
<td>
<select data-bind="options:variableList, optionsText:'Key',optionsValue:'Value', value:selectedVariable>
</select>
</td></tr></tbody></table>
Js for both is same like:
var list = //some array
var arr =// [{variableList : list}];
var model={
mappings:ko.observableArray(arr)
}
ko.applyBindings......
Imagine your "model" being a function. When binding in html, you are able to access only local variables of model. Model itself is not visible because that is out of your scope. Mappings is a variable in model and that's why you can access it by just writing foreach: mappings. model is not part of model, it is model... Hope this helps.
Also, when you write foreach: mappings then you kind-of enter a foreach loop so that is why you don't write mappings.PropertyName and instead just write PropertyName
edit: my comment on your post was completely wrong so I deleted it

Knockout JS foreach looping through array of objects

I have a observableArray:
self.stats = ko.observableArray([
{"DFTD" : new Stat("Defensive TD", "DFTD",0,20,0,self.playerGroups[1])},
{"GL" : new Stat("Games Lost", "GL",0,16,0,self.playerGroups[2])},
{"FGA" : new Stat("Field Goals ATT", "FGA",0,100,0,self.playerGroups[0])},
]);
and i am trying to loop around it with a foreach and then print out the Stat objects name property which is the first element in that object.
<tbody data-bind="foreach: stats" id="stat-sliders">
<tr>
<td><span data-bind="text: stats.Stat().name"></span></td>
<!--/*<td class="statsListItem">
</tr>
</tbody>
Im not sure if im doing it right. I am a beginner with knockout and wondering if anyone can help?
The fiddle below creates an array of football stats, which contains a key field and a stat field. You could use the key field for quicker access if you like. If you want an object where you have the property be the key, that would allow for the quickest indexing, though its not an array then.
See if this is what you want.
http://jsfiddle.net/johnpapa/CgFjJ/
You shouldn't need to call back into stats. Notice that the span binds to the property of the model that is inside the array.
<tbody data-bind="foreach: stats" id="stat-sliders">
<tr>
<td><span data-bind="text: name"></span></td>
<!--/*<td class="statsListItem">
</tr>
</tbody>
Also, I don't think Knockout works well with keyed arrays like that.

Categories