In the following code pVM.People and pVM.PeopleSelected are observable arrays.
<tbody data-bind="foreach: pVM.People">
<tr>
<td><input type="checkbox" data-bind="checkedValue: $data, checked: pVM.PeopleSelected" /></td>
<td data-bind="text: $data.Name"></td>
</tr>
<tbody>
When I check a box, all the boxes get selected, and if I look into the chrome javascript console, my array prints ["on"] instead of having the objects in the list pVM.People.
I made a small thing in JSFiddle and the code works fine, so I know there is something more complex going on that is not being represented in the above code. However, the application is very large, and I am not even sure what to look for.
Can anyone point me in the right direction on why the objects are being converted to "on" when I check the boxes?
I was using the wrong version of knockout. In knockout 2.3.0 apparently my solution above does not work.
Related
I have some html like such that I need to somehow select out using dojo:
<tr>
<td class="form-label-text">Thumbnail Small:</td>
<td></td>
<td class="form-inset">
<span class="disabledText">Not Available</span>
</td>
</tr>
The only unique thing about this than other rows is the "Thumbnail Small:" part.
I know jquery has a :contiains selector http://api.jquery.com/contains-selector/
I cannot find an equivalent way to do this using Dojo.
(Modification to the original html is not an option)
Any suggestions are appreciated.
Hi I dont think we have similar thing in Dojo library , but you can go for custom Dojo implementation.
dojo.query("td").filter(function(node){
if(dojo.attr(node,"innerHTML")==="Thumbnail Small:")
return node;
})[0];
I have prepared a JSFiddle here for you : http://jsfiddle.net/t6u05ket/
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
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}
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
I've got the following code using Knockout.js to display an array of bools as a series of checkboxes:
<table>
<tr data-bind="foreach: Array">
<td><input type=checkbox data-bind="checked:$data"></td>
</tr>
<tr data-bind="foreach: Array">
<td data-bind="text:$data"></td>
</tr>
</table>
<button data-bind="click: toggle0">Toggle Element 0</button>
<script>
var simpleModel = {
"Array" : ko.observableArray([ko.observable(false),
ko.observable(false),
ko.observable(true)]),
"toggle0" : function() {
simpleModel.Array()[0](!simpleModel.Array()[0]());
}
};
ko.applyBindings(simpleModel);
</script>
If you look at http://jsfiddle.net/tP9Dm/3/, you can see that, while the checkboxes respond to changes in the view-model, the view-model doesn't respond to changes in the checkboxes.
According to https://groups.google.com/d/msg/knockoutjs/-dHpOg5ZBPI/1q4iqdTlKvUJ, it looks like $data is unwrapped by the foreach loop, so data-bind doesn't know to use it to update the model.
Clearly I can fix this by making the array contain objects instead of simple booleans, but that seems like it should be an unnecessary extra layer of indirection. Is there a simpler way to propagate changes back to the model?
There doesn't seem to be a way to do this, because $data in this case is the unwrapped value.
Even setting up a click handler doesn't work, because the data sent to your handler is also unwrapped.
Bummer. Looks like the only way to do this is to wrap your observable into an object, another layer of indirection.