Going through a Forms Angular2 tutorial. And I get to a part where my code isn't doing what the tutorial explains should happen. So before I reach a conclusion that Angular2 Beta has a bug maybe someone could try this out.
It's a problem around the 2 way data binding of the "Powers dropdown" where a user input change isn't being reflected in the model. The 2 way binding occurs with:
<select class="form-control" required [(ngModel)]="model.power">
EDIT:
See full code here
When you run the code keep an eye on the "{"id":18,"name":"Dr IQ","power":"Really Smart","alterEgo":"Chuck Overstreet"} " output. You will notice that it changes as you edit the 2 txt inputs but that changes to the dropdown are not reflected in this output.
Related
I would like to style a couple of elements using a filter to decipher if it should be yellow or red.
I understand filters should not carry logic operations in them as such so am guessing a service is the first port of call before i create any filter for it.
I am leveraging data from a backend (still a bit unsure of the Backend model here, but know I can leverage certain objects to obtain the data needed for working on) I mostly need to know if i`m on the right path by using a service to control the logical outcome and then a filter to provide 'filtration' of that outcome.
BTW: sorry, im waiting for my project to checkout from SVN at mo so cannot provide a skeleton attempt.
Will do in a bit though .....
Any advice before hand will be much appreciated
:) Gruffy - thanks for reading
You can directly set the class attribute if you want, so your filter can simply return the CSS class to apply:
<p class="{{'foo'|myFilter}}">Foo</p>
Here's a fiddle showing what I mean.
Bit of a crazy one, certainly a very very frustrating one!
I have a pretty basic ng-repeat going on and it's working in 95% of the cases. However a few of the binds just aren't displaying.
Basic use:
<p>{{result.thingy}}</p>
Nothing shows up in the HTML
However if I use
<p>{{result.thingy | json}}</p>
Then it displays, but with quotemarks around it.
So the data is there, how come it won't show? Is it somehow an invalid type?
I have ported this across from another Angular app which displays it fine, so I suppose there might be a difference in the Angular version or something like that, but this seems crazy to me.
It also shows if I use | number
Apologies, I can't share the data apart from that when I print the full JSON to the screen, it looks like:
"thingy": { "pounds": "174", "pence": "08" }
I'm trying to implement AngularJS + Select2 with Multiple selection enabled.
When I include the full angular-ui package, it works, however I do not want to use the full version.
So, I tried to do the same, but just including the ui-select2 module itself and I got surprised that the initSelection does not works this way.
I have prepared 2 Plunker's to illustrate both tries, the first, that does not work, shows the include of only ui-select2 module and the second example, that works, includes the full angular-ui package.
1º Example (does not work)
http://plnkr.co/edit/YOrzQKGx3py24Lf3JQ2Z?p=preview
2º Example (works)
http://plnkr.co/edit/ZeYgJyLHo30hTi2DerJZ?p=preview
Click on the 'set selected' button, below the select2.
After dealing with this for about 12 hours I'm stuck.
Would any angularjs+angular-ui Guru knows what is going on here?
I need to make this work with only ui-select2.js, so I need the Example 1 working.
Any ideas?
Thank you very much.
I encounter a problem that I can't resolve with the angularjs online help.
I'm writing angularjs/karma scenario test where I want to verify that a part a view which displays a purse amount persists after page navigation. The purse amount comes from a bound value.
View code:
<div class="label">Mon Compte<br>{{ User.getBalance() | currency }}</div>
Scenario code:
var b1 = binding('User.getBalance() | currency');
browser().navigateTo('/another-route');
var b2 = binding('User.getBalance() | currency');
expect(b1).toEqual(b2);
Failed scenario result:
expected {"name":"select binding 'User.getBalance() | currency'","fulfilled":true,"value":"4 353,90 €"} but was "4 353,90 €"
What I understand is that it tries to compare a promise with text value which doesn't work, but I have no idea to solve this.
The answer depends on what you are actually trying to test. Are you trying to assert that the text displayed in your VIEW is some value or are you trying to assert that the MODEL is staying the same? If it's the VIEW you are interested in you are on the right track. My suggestion would be to use Protractor rather than Karma.
Take a look at the documentation and let me know if you still can't get your tests working.
On the other hand if it is the MODEL you are interested in, things become a bit more complicated. You will not be able to simulate the browser navigation with a standard unit test. You would have to either create a mock service that lets you simulate the route provider or use a third party library like ngMidwayTester. Take a look here for more help with that.
I've came across this issue today and I think I might need some help. We are using 1.6.1 version of Dojo, but this is cross version issue.
Steps to reproduce the following issue are pretty simple:
click the dojo doc link for Filtering Select dijit.form.FilteringSelect
On the documentation page, click the first FilteringSelect sample
In the Codeglass window sample, click the filteringselect and add "x" to "California", thus bringing it to invalid state
While focused, delete the "x" letter.
and here comes the problem. Technically the value is correct, but the dijit is still like in error state (unless it loses focus).
I'd like to get the dijit react and render correctly straightaway I delete the character causing the invalid state without losing focus.
Any ideas for the workaround?
Thank you.
ok. for eveyryone else interested the solution was 'quite' simple, just use the dijit.form.FilteringSelect._refreshState() .The underscore prefix is might not be someone's cup of tea but that was the only way to get it in correct state.
in our case it was a bit tricky as we are using the dojox.data.QueryReadStore wrapped in our own object and I needed the proper trigger which I've found in connecting to onComplete event of the inherited fetch() method.