Ok, so here is a Plunker http://plnkr.co/edit/p7eJFTdsk9CFXwEIXZyb of the behavior that I am experiencing. I have tried to use the same ng-model on all levels but that also displays odd behavior and this is the closest I have gotten to what I am actually trying to accomplish.
I would like the toplevel checkbox to work like the sublist1 checkboxes.
Steps to create unwanted behavior:
click top level checkbox for item 1
click top level checkbox for item 1 again, so far works as expected.
click sub level item 2.1 checkbox this works. However the Top Level Item 1 checkbox will no longer change the item 2.1 checkbox.
Because each ng-repeat creates a new scope, once a deep scope is manipulated to have it's own properties, it will no longer inherit from higher level scope.
This is expected.
Check out a question on my profile regarding scope and ng-repeat.
Related
I have a gist demonstrating my problem here:
https://gist.run/?id=e2ccd5925e383f2fc36ad277c31bcf23
The checkbox version works fine, if you remove a check, it updates the model right, but if you change the selected radio button, it will keep the true value on the radio that got it's selection removed. If I remove the model.bind="true" value, it will write "on" instead of true. I do want true/false, and not on/off.
I want the object to get it's property updated to be a true or false depending on if it's chosen or not, dynamically. In my scenario I don't know how many radio buttons or checkboxes will need to be selected. I only know that in the cases of it not being a collection, I only want one, and in the case that it is a collection, I want an unknown number selected.
Like the other answer mentions - <input type="checkbox"> behavior is different from <input type="radio">.
I have forked your gist and made the following changes to make your scenario with the radio button work in aurelia:
1) Added a function to the first object in your params collection called selectedChanged(it doesn't have to be there, could be on the viewmodel class instead, perhaps a better place for it). It is responsible for handling selection change in the radio button group, specifically it will iterate over a collection of options (second parameter), and set selected property to true on the option who's id matches the first parameter of the function, and to false on all other options.
2) There is an event on the input called change, I delegate it to a function called selectedChanged mentioned above, passing the option.id value and options as parameters.
https://gist.run/?id=5f38414fde799dfc145fc1291d9f2fd3&sha=f12283b08bfb45e77b8280d46a3709b6ccb82768
I think what you want to achieve (turning individual value on/off) is not achievable with radio, as the way it works (select a single value out of a set) is different with check-box (turning individual value on/off) (MDN reference). So If you truly want to have radio like appearance, with check-box behavior, consider employing some CSS and extra DOM elements to make it look like so, and behave like so.
I have a list of checkboxes - that populate a tag textarea - when the user remove a tag I also want to uncheck the checkbox
When the user navigates away and come back the checkboxes should maintain the state they were in - ie check against the tags and see if they match
So I need
Click state to pouplate tags
initial check to see if the checkbox should be checked or not - the scope of the checkboxes is killed by navigating away unless I rootScope it maybe?
Delete tag unchecks the check box
Only 5 checkboxes in a list can be checked the 6th would return no.
Needs to be a select all with above taken into account
I am really quite lost in how to architect this at the moment
going from click to change to model to checked....
many thanks for any help
try to do the next thing - create an object { clicked : true, label: label}
when you goes throught ng-repeat you have an object to render and state, when somebody delete label - you should just add whole object to handler and there change checkbox state tie to needed element.
P.S. If you add some code we can work with your stuff.
I have a collection of contacts and I generate an ion-item for each contact using collection-repeat. Each ion-item has a span, a paragraph and a checkbox element within it. I chose to use collection-repeat over ng-repeat because it increases performance.
I understand that collection-repeat only renders the items that can fit the screen at once and renders more as we scroll.
The problem I have is that when I click a checkbox within an item, for example, the first one, and scroll down to see more lists, another checkbox within an item lower in the list would also be checked automatically. This is not the intended behaviour as I want users to be able to check a checkbox for every item.
These pictures will make the explanation clearer:
Why is my list showing this behaviour? Does it have to do with how collection-repeat works or is it a problem with my code? This is really killing me and I need to find answers. Thanks!
Ionic team is working on it right now https://github.com/driftyco/ionic/issues/1806
Question: Is there a bug in angular-strap? Or do I misunderstand how Angular works, and this is expected?
I've created a plunker to demonstrate the behavior.
What I want:
I want to show a different tooltip for each item in an ng-repeat.
Behavior I'm seeing:
Under certain conditions, the tooltip content is not properly inserted into the content template. Thus you only see the template, and not the content template or content itself.
Conditions:
When the page is first loaded, the tooltips work as expected.
When an item is added to the ng-repeat, its tooltip does not populate the template's content section.
If the page starts off with zero items in the ng-repeat, the tooltip in the first item added will work as expected. Items added after that will exhibit the problem.
Regardless of how many items the ng-repeat starts with, any removal of any item from it will make all items added in the future not have working tooltips.
Thoughts: If I boil it down, the "first load" works fine. After that, it doesn't. I'd guess that what happens is that there's a compilation step happening after the first round of adding items into ng-repeat. At that point, the angular-strap tooltip code sees the directive attributes, and sets up those tooltips and the content template. Subsequent changes to the ng-repeat are missed by angular-strap (even though I can see in the console that the call from bs-popover=tooltip(item) does actually run each time the ng-repeat list is updated). But I'm still stumped and wondering if this is behavior I can get around.
How do I allow dynamic tooltips in items added to an ng-repeat?
This seems to work in _popover.html
<div class="popover-content">{{content}}</div>
That is using {{ }} instead of ng-bind...works very odd.
Upon further investigation... Its probably happening somewhere around here:
https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js#L83
Though I don't know where/how/what yet.
Update
So the bug (in Angular-Strap) is with caching your template. Initial retrieval (via http) works fine. But it caches them as an array, and upon retrieval from cache (subsequent additions) it gets an array. Which doesn't have a .data property so your template is empty, and your ng-bind is removed..
I am creating a grid of checkboxes to enable a user to select different events and age classes for an athletics meeting. The events are the columns, the classes are the rows.
Here's the plunk: http://plnkr.co/edit/j6gRR18qXCDNCMQ9VDNG?p=preview
I first created this with an nested ng-repeat. It works, but is very slow to load which is apparently due to the creation of data bindings and watches. To speed things up, I wrote a directive to do the nested looping and the building of the html.
The checkboxes are bound to a two dimensional array - classevent[][].
The problem is that I cannot get the bindings to work with the directive.
Here are the steps to see the problem in Plunker:
When it finally loads, open the console and then scroll down the grid to the bottom - column 201, row 32. Click save and you get false in the console. Check the box 201,32 and click save again. It's true. So the data binding is working.
Now go to the html and comment out the tbody.../tbody and uncomment the tbody classeventgrid.../tbody directive as described in the code.
It loads much faster, but if you do the same as before, you will see that the bindings are broken.
Can anyone tell me what I have done wrong?