AngularJs, how to assign dynamic model name - javascript

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 {{}}

Related

Angular bind table to generic object

I'm just starting to explore with Angular. Now what I'm trying to do is using an mvc handler that returns a jsonobject. However the returned jsonobject is generic, so it can be different types of object, and they all have a different amount of columns. I want to bind all these columns to a table, but that means i can't just create a fixed amount of columns and bind them like so:
<table class="table">
<tr ng-repeat="r in items">
<td>{{r.ID}}</td>
<td>{{r.Name}}</td>
<td>{{r.FirstName}}</td>
<td>{{r.Telephone}}</td>
<td>{{r.Email}}</td>
</tr>
</table>
this is NOT the way i want it, basically i want to have a table that binds to an object and that creates table columns for every property of the object.
thanks for any advice!
You can iterate the properties of the value like
<tr ng-repeat="r in items">
<td ng-repeat="(key, value) in r">
{{ value }}
</td>
</tr>

AngularJS data-binding between two arrays

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 ?

How to view the dynamically added fields in Angular.JS?

Please check this:
http://plnkr.co/edit/61JgnU?p=preview
If you start filling the fields you will see the fields been printed. Which is fine.
Now if you press the Add Input then bunch of fields will be added.
I need to add the newly added fields value to be printed under the main fields. (Please let me know if you need more explanation.)
Here is how I need it to be for the newly added fields:
I don't know how to show the fields without needing to make another $scope.fields array.
One more thing, in the $socpe.fields array there are more than 20 different fields, I just put what it needed for this question.
Thanks.
My recommendation would be to loop through your inputs array with the same markup you used for the users. The following seems to work if I understand what you're looking for.
<div ng-repeat="input in inputs">
<table class="table table-bordered">
<tr ng-repeat="field in fields | orderBy: 'index'" ng-show="input[field.id]">
<td class="col-md-4"><b>{{field.name}}</b>
</td>
<td class="col-md-7">{{input[field.id]}}</td>
</tr>
</table>
</div>
Another option you might want to consider is a custom directive taking the fields array and the display array as parameters.

AngularJS - Directives with Angular UI Bootstrap

I'm using Angular UI - Bootstrap, specifically the Typeahead directive. http://angular-ui.github.io/bootstrap/#/typeahead
I'm attempting to use the 'typeahead-template-url' to create custom html templates for my suggestion boxes. After trying multiple techniques, unsuccessfully, I discovered that by purposely messing up my quotation marks 'solved' the display issues. I would love to understand why this is breaking and get it working properly.
For example: this works
<table class="> <!--see class quote error -->
<tr>
<td>
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>ID{{ match.model.id }} - {{ match.model.text }}</a>
</div>
</td>
</tr>
</table>
This DOESN'T WORK
<table class="">
<tr>
<td>
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>ID{{ match.model.id }} - {{ match.model.text }}</a>
</div>
</td>
</tr>
</table>
FIDDLE is here: http://jsfiddle.net/nicktest222/JXtaZ/24/
Additionally, when you select an item in the results list, it returns the entire object. How can I get it to return a specific property in the object?
Any help would be greatly appreciated.
Thanks
I think it is the way you add your template (columnTwo.html) in JSFiddle.
Look at my demo (which is based on yours): http://jsbin.com/aMOrOra/1/edit?html,js,output
As for the typeahead property:
<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion as suggestion.text for suggestion in sample_data | filter: $viewValue" />
Here it means that the suggestion object is used as the selected value, but I want to display only the suggestion.text property in the box. But monkey will still be set to the selected suggestion object.
Just so you know, your current filter will look for the query on every properties of the suggestion object, not only text.
EDIT: To filter only the text property, use the filter like this:
filter:{'text':$viewValue}

Angular JS. I am attempting to filter a simple list of results using check boxes

I am attempting to allow my users to filter my results array using check boxes.
I am just getting in to the Angular JS frame work and not quite sure how to approach my scenario.
I am trying to work out if what I am doing is possible in the way I am approaching it or do I simply need to write a custom filter function.
I have put together a simple jsfiddle to illustrate my issue.
http://jsfiddle.net/arkleyjoe/7jUp6/
Here is the mark up:
<div ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'}]"></div>Exclude Johns
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!John" ng-false-value="">
<br>Exclude Adams
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!Adam" ng-false-value="">
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
<tr>
<tr ng-repeat="friend in friends | filter:search">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<tr>
</table>
</div>
In this example I am using check boxes to filter certain names from my list. It works fine if I select one or the other but I want to select both. Angular JS is obviously doing something behind the scenes here because it actually prevents me having two boxes selected.
You are trying to bind a single property search.name for both the check boxes, so checking one of them would override the value set by the other one. If you want to filter on both check box values you need to assign the ng-model expression to different model properties.
You can create a method on the controller and pass it to the filter expression, this method would be called one time for each item in the list. If the function returns true the item is added to the end result. You can write your custom filter expression here. See filter documentation here

Categories