I've just started out using Ionic, I am trying to print the value of the selected list Item {{ item.value }} , however can't find any documentation that suggests how to do this.
Possibly an ng-click="myFunction()" would work here, but I am stuck as to where to start. I have it working with the Ionic Radio buttons. But I want the list to re-direct to another page on click, but still hold this value in the main controller.
Here is the Codepen attempt.
Thank you.
Well, at first ng-click="do" will do absolutely nothing. It should be ng-click="do()", and of course, you have to have a function called do in your controller to perform an action.
The 2nd. problem is: you're inside ngRepeat, it creates a child $scope, so you have to use the Dot Rule:
$scope.model = {};
Then, you can do it:
ng-click="model.itemValue = item"
Check the forked DEMO
Related
I am trying to figure out how to generate list of option elements using ng-repeat, but one of them to be marked as the selected option on load.
After googling, what I found is this base, which I modified by adding the selected property to the data objects
https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview
However, it seems that ng-selected="option.selected == true" has no effect :(
Why? I also have the more complex example here: http://jsfiddle.net/ej5fx3kr/14/ which works, although I am not sure what is the difference, or what is the model here used for (note: changing the model name from "program" to anything, it still works... so not sure what is the purpose).
Bonus points: How do I debug code in AngularJS in directives? Like experiment in debug mode line by line to actually see what are the variable values in that particular scope, what is available to use, etc...
My ultimate goal in this question, is to load list of values via ajax on page load in the controller, IF there is a routeParam in the URL, find it in the list of loaded values, and add selected attribute, then set selected=true in the generated HTML on page load, otherwise not pre-select anything in the populated select box on the page load, so this is why its important for me to understand this on the simplest example before trying to plug this in.
Thanks!
The "Angular Way" to handle this is to use ng-options instead of ng-repeat, and then simply set the model equal to the default value on controller load.
For example:
<select ng-options="option.name for option in data.availableOptions"
ng-model="selectedItem"></select>
$scope.selectedItem=$scope.data.availableOptions[2];
For a more advanced case, where your ng-model might not be the object in the array, but a single property, you can use a modified version of ng-options:
<select ng-options="option.id as option.name for option in data.availableOptions"
ng-model="selectedId"></select>
$scope.selectedId = '2';
Here is a modified version of your plunker showing these different possibilities: https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview
Using ng-selected = true inside ng-repeat would solve this .
However be sure of the data that you call in ng-repeat.For additional debugging and experiment line by line use chrome debugger .go to source tab and set break points on the js lines that you need to debug.This will let you debug line by line by pause and play . Hope this helps.Thanks
In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!
I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:
<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">
Basically the variable in model keep the value received from db irrespective of the state on UI.
Second problem I am having is with on and off labels that it keeps on displaying default On and Off.
I opened an issue on the github site and a fix was applied. See this link:
"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."
https://github.com/kendo-labs/angular-kendo/issues/333
The second problem (the on/off labels) is because it should be:
k-on-label="'Yes'" k-off-label="'No'"
Note the string literals, otherwise it is interpreted as a variable.
In a project we're doing, we have created an inbox where the users (amongst other things) can select the items. If a user selects an item, the button should be enabled -- if none are selected, the button should be disabled.
Simple enough, but for the life of me, I can't get it working :-(
You can find a fiddle here: http://jsfiddle.net/rzrfp/
I presume I'm missing something very, very, VERY simple and stupid, but I've been tried virtually everything, and can't get it working ...
Use ko.computed instead of ko.computable.
Or even better: use data-bind="enable: selectedItems().length > 0" in your button element.
So you can omit the computed showButton.
EDIT: To use the right context use var modelImpl = new myModel("myParam");. Otherwise this inside the model refers to the window object.
I have an emberJS object, viewed by an editablefield view, in order to be able to edit it with bindings.
I modify the view in order to be able to replace links in the text.
My problem is that if I use the inside views (Zs.RealValue) render function, it won't refresh on each update, like the simple {{value}} would do, only if I erase the text and after erase the first change.
I have a simple example here:
Steps to do: double click on one of the edit fields, the edit box appears, try modify the value, you will see, that the simple view is being updated, but not the other text view.
http://jsfiddle.net/symunona/hCjEc/7/
The problem appears because you try to implement the render function yourself in RealValue. If you change RealValue to just this:
Zs.RealValue = Ember.View.extend({
template: Ember.Handlebars.compile("{{value}}")
});
then the example works.