So I have this table with select boxes on each row. The problem is that when I make a change in one select box, all of them get changed showing the same value. What I need is to unbind all select boxes to be able to have different selections on each one of them.
Code goes like:
<tr ng-repeat="item in userMappings.items" ng-model="item.mapped">
<td class="col-md-3" ng-model="mappingType.name">
{{item.idsport}}, Game Type {{item.idgametype}}, {{item.name}} (Current limit {{item.value}})
</td>
<td class="col-md-3 mapType" style="padding-bottom: 25px; padding-left: 15px" >
<h4>Mapping Type: <span style="font-size:0.8em">{{selectedType}}</span> </h4> <br />
<select ng-model="mappingType.name" ng-change="which($index); selectedRow()" ng-options="item.name for item in mappingType"></select>
</td>
</tr>
When you use ng-model to bind to mappingTypes.name it will modify the property on the controller scope because that's where it's defined. mappingTypes isn't part of ng-repeat's scope so it goes through the scope inheritance chain and updates it there. So when you select an item, mappingTypes is now an array with a name property. All of your items bind to that same array, so they all have the same value.
If you want to only change a specific item in ng-repeat, you should use something like item.mapping. if you modify anything other than item it's modifying the entire controller's scope.
Related
I'm trying to create a table with a dynamic number of rows and columns. Each row is a name column followed by some checkboxes
<tr *ngFor="let groupPerms of getGroups()">
<td>{{groupPerms.name}}</td>
<td *ngFor="let permissionType of availablePermissionTypes">
<input id="{{groupPerms.name}}.{{$index}}"
type="checkbox"
[checked]="groupPerms.checked"
(click)="doSomething()"/>
</td>
</tr>
If i drop the outer *ngFor, and 'hardcode' it with the first row, then it works fine and the doSomething method is called.
With the outer *ngFor, the click appears to click on the table row element (it flashes slightly). Using chrome's dev tools, clicking seems to be clicking on the repeat part. Adding a (click) to the tr has no effect
<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
I won't lie, I have no idea why this has fixed it, but for closure... adding the trackBy (with indexTracker being a function in the component) has done the job. If anyone knows the reason for this working I would be grateful
<tr *ngFor="let groupPerms of getGroups(); trackBy: indexTracker">
<td>{{groupPerms.name}}</td>
<td *ngFor="let permissionType of availablePermissionTypes">
<input id="{{groupPerms.name}}.{{$index}}"
type="checkbox"
[checked]="groupPerms.checked"
(click)="doSomething()"/>
</td>
</tr>
This is basically a 2 part question which is why some of the other answers I've found on StackOverflow don't sufficiently cover what I'm asking.
Also need to note: using Bootstrap.
My simplified html can be explained like this:
<div class="container-fluid">
<div class="row"> Headers </div>
<div class="ParentObjectDiv" ng-repeat="pobj in pobjlist">//pobj list is returned from call in controller
<div class="row"> ParentObject values </row>
<div class="ChildObjectContainer">
<div class="row"> Headers </div>
<div class="ChildObjectDiv" ng-repeat="cobj in pobj.cobjs">
<div class="row">
<div class="col-md-1">
<select ng-model="cobj.someproperty"
ng-options="option for option in optionlist">
//Here is the issue : the optionlist is returned from a separate call in the constructor
//The cobj.someproperty can be null, and when that's the case, I want a custom selection
//that says please select a property
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Ok, so on to what I have tried.
Can't do a selectedOption = "whatever" in the controller for obvious reasons.
I have tried adding an angular expression that sets the property of cobj.someproperty to a value like "Value not know" if it detects that the property is empty/null.
This is probably coming down to a fundamental misunderstanding of angular on my part. I have tried putting the expression that assigns this "not known" value to the property in various expression directives and just in the html itself. It is not an option to have this "not known" value on the actual object in the database and the list of Pobj's and their Cobj's is very large so I don't think I can spare iterating the entire list structure to set it before rendering and then iterating it again in the ng-repeats. I'm hoping that I can have a quick expression that evaluates null and sets it. Something like:
{{cobj.someproperty = cobj.someproperty ? cobj.someproperty : "value not known"}}
But not sure if that's a valid expression and if it is where I would put it because so far I've tried putting it in the ng-model itself, an ng-if, and just a blank line of html all within the scope of the cobj in the ng-repeat and none are working.
I haven't "tried" this, but my preferred solution and the one I've been researching is to see if there is a way to instead of evaluating and changing the cobj.someproperty, to change the ng-model of the select to point at a dummy property and at the same time set the cobj.dummyproperty to cobj.someproperty if some property is set, otherwise to set it to "value not known".
Additional considerations :
The parentobject list can be very large (>1k) and has on average 3 childobjects (but can have anywhere from 1 to 20) so performance is an issue.
There will be many cases where the user will not want to set this property so "value not known" when null will not be a temporary thing.
A user also needs to be able to select "value not known" if they have later realize they were mistake about the cobj.someproperty.
I am going to work on the logic to push the changes back to the database later so I am not worried about how the value is stored in the model in angular because I will most likely not use the ng-model to update the field. Right now I'm just worried with the selected option of the drop down.
Here is the answer with simplified html.
JavaScript code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{
"someProperty": "abc"
}, {
"someProperty": "xyz"
}, {
"someProperty": null
}]
$scope.optionlist = ["abc","xyz","pqr"];
});
HTML code:
<table ng-controller="MainCtrl" >
<tbody>
<tr ng-repeat="item in items track by $index">
<td width="75%">
{{ item.someProperty }}
</td>
<td width="25%">
<select ng-model="item.someProperty" >
<option value="">Value not know</option>
<option value="{{option}}" ng-repeat="option in optionlist">{{option}}</option>
</select>
</td>
</tr>
</tbody>
So whenever angular finds a null value for someProperty it binds the value to "Value Not Know". I am using ngRepeat instead of ngOption. Let me know if this is what you are looking for.
here is my plunk
I have the following
<table id="socialMediaContainer" class="socialMediaContainer" style="width: 100%;">
<tbody>
<tr ng-repeat="row in detailCollection.ChannelsInfo"
ng-controller="WhiteLabelSitesCtrl">
<td><input id="txtSocialName" type="text" class="socialName"
placeholder="Name" ng-disabled="ViewMode" maxlength="250"
value="{{row.SocialChannelName}}" /> </td>
<td><input id="txtSocialURL" type="text" class="txtLabel socialURL"
placeholder="URL" ng-disabled="ViewMode" maxlength="250"
value="{{row.SocialChannelURL}}" />
</td>
<td class="DragnDropIcon"></td>
<td>
<a class="orange " ng-show="ViewMode">Upload</a></td>
</tr>
</tbody>
</table>
and I have another button outside the ng-repeat that updates the ViewMode variable, but this is not working inside the ng-repeat neither for the ng-show not the ng-disabled. what am i missing here?
The problem seems to be, that you need to move ngController directive to the table level (at least): it can't be on the same element with ngRepeat if the later iterated over the array defined in controller.
<table ng-controller="WhiteLabelSitesCtrl" ... >
<!-- ... -->
</table>
Demo: http://plnkr.co/edit/tu4TLmWIxdcYaiEd7whn?p=preview
ng-repeat creates a childscope for each item in the repeater.
Thus viewmode will be a primitive value on that child scope and therefore as a primitive will lose inheritance binding with the parent scope.
If you declare it as an object property in the controller scope however it will then be a reference to that parent object.
$scope.mode ={ViewMode: false}
html example
<a class="orange " ng-show="mode.ViewMode">Upload</a></td>
Try to pass object instead variable inside ng-repeat scope. Instead ViewMode,
declare in your controller:
$scope.model = {};
$scope.model.ViewMode = false;`.
And your binding must be like this: <a class="orange " ng-show="model.ViewMode">. After that all be work fine.
Read this article to understand why it happens: https://github.com/angular/angular.js/wiki/Understanding-Scopes
The button outside of the ng-repeat is not going to be nested in the same controller. The variable that it's modifying probably is not the same one that ViewMode under the WhiteLabelSitesCtrl is looking at.
When you point to this ng-controller, that controller will be activated with a new scope associated with it
<div ng-repeat ng-controller="WhiteLabelSitesCtrl">
<div ng-show="someValue"></div>
</div>
When you reference this controller again on another tag, it won't reference the existing controller as you might be expecting, it'll actually do the exact same thing... it will create the controller, and create a new scope for it- completely separate from the original one.
<div ng-controller="WhiteLabelSitesCtrl">
<button ng-click="someValue = !someValue"></button>
</div>
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 {{}}
I have a html grid that returns a checkbox with each row. Currently I have these bound with knockout to my viewmodel. I've gotten far enough to capture the id of what is checked for a row but I'm not sure how to make Knockout give me a list of all rows checked and the content of every cell for the row.
Ultimately the intent is to let users select multiple rows from this table and then export that data. So I need a good way to gather the entire row up.
I've only been using Knockout for about a week so am I trying to get it to track something that perhaps I'd be better of just looping through the table with javascript?
<tbody data-bind="foreach: projectListing">
<tr data-bind="css: $data.rowclass">
<td><input type="checkbox" data-bind="value: $data.id, checked: $root.selectedRows, click: $root.toggleRowSelection"/></td>
<td data-bind="text: $data.SORT_ID"></td>
<td data-bind="text: $data.PROJ_ID"></td>
</tr>
</tbody>
*I know that code isn't enough to go on but I had to put something in here so I could list a link to jsFiddle.
I have a fiddle going that represents this to show code I have so far. What I'd like to do with this fiddle is each time I check the checkbox, the entire row content should show up. That would get me to the place I need to be in my real project.
Any ideas on how to go about this?
Here is what I have so far.
http://jsfiddle.net/robhortn/ad2Yu/4/
Instead of getting the id with the checked binding, you can create a selectedItems computed to get the selected items objects
self.selectedItems = ko.computed(function() {
return self.availableItems().filter(function(item) {
return item.Selected();
});
});
Html
Selected Books:
<div data-bind="foreach: $root.selectedItems">
<span data-bind="text: Name"></span>
<br/>
</div>
See this JSFiddle