changes to ng-model are not updating the model (in yii) - javascript

I want to use angular inside of a Yii view because of its data binding.
I copy/pasted the exact code to jsfiddle and it works like a charm: http://jsfiddle.net/9wd9msgh/
Inside my Yii view the initial value from the controller is loaded, but it is not updated when changing the value inside of the input field
I'm including the javascript files from the view like this:
Yii::app()->clientScript->registerScriptFile( Yii::app()->baseUrl.'../javascript/angular1.2.26.min.js' );
Yii::app()->clientScript->registerScriptFile( Yii::app()->baseUrl.'../javascript/checklist.js' );
Does anyone have an idea what is wrong?

Related

How to make use ngModel.NgModelController's properties $touched within the controller?

In fact, I want to ask how to make use ngModel.NgModelController's method and properties within the controller, and it will be perfect if there is more explaination about the usage of ngModel.NgModelController instead of giving the link of the api to me? What I have faced, is I want to set something like the following works within my controller. More precisely, I want to make the option with "--- please fill in ---" 's text to disappear once the droplist is clicked, but I want to do the operation at the controller instead of like the example below. To split off my question, there are several pieces I am interested in:
How do I set up the object used for the form (as I am doing a form) at both the controller and the HTML template
How do I set up the corresponding objects to each of the form field, like the select field below in both the controller and the HTML template
What else should I know to solve the question?
<select name="dropdown"
ng-model="$ctrl.value"
ng-options="o.id as (o.state) for o in $ctrl.form.stateCode.options">
<option ng-if="!form.dropdown.$touched" value=""> --- please fill in --- </option>
</select>
P.S. I don't know whether because I am using requireJS together with angular, so the $ctrl may actually representing the scope of the controller.
In angular when you are using forms it is more recommended that you should use form tag with a name attribute so that angular binds that form to the current controller scope.
and after that when you are using input with in that form then the input that are using ng-model directive, that input controller will be bind to the formcontroller. Here I am attaching a fiddle http://jsfiddle.net/WdVDh/79/
$ctrl is not same as $scope. When we are using controller as syntax, then angular binds the $ctrl property to the $scope
For more info on this you should go for https://docs.angularjs.org/guide/forms

Two way binding for checkbox inside an accordion not workiing

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!

AngularJS model does not update after manual change of option

I have a problem with AngularJS model. Currently I have two select tags and I fill it by some async action then I just set select tag model by received data. Everything works well but if I change select tag (option) manually then model can't be changed anymore by this async actions - script keeps model picked by me manually - I am sure that I assign proper data to model from server response, because it works untill I don't change it manually...
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
(second select looks like above).
If someone have some idea why ngModel can't be updated after manual changes, please reply :)
You must be using ng model with direct variables. When using ngmodel with html input types use object types in ng model else value does not reflect.
$scope.req={value:""};
in html use
<select data-ng-model="req.value"></select>
Weird but I fixed it - It was because 'select' was wrapped by div which had ng-controller. Controller contains actually one action with change select option. After remove this ng-change it didn't help but removing whole controller declaration did..
<div ng-controller="sController">
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
</div>
Someone can explain me this anomaly ? ;/ Model always was changed in main/common controller (parent) where also was initially created.
http://jsfiddle.net/nkr33bo0/

AngularJS - missing ng-model items in $scope object

I'm trying to create a table in which you can edit each row and save your changes. I'm having trouble posting all of the items in the row after pressing save. For some reason, only some of the elements are being sent. Any help or insight would be appreciated.
Here is a plunker of my code
I watched the console in dev tools, and it looks like the $scope.editedEvent object (line 12 in app.js) contains undefined paramaters, except for "name".
As I said in my comment, you can't put ng-model and ng-bind ( or {{}} ) in the same element. Ng-model is for input type fields (input, select, textarea...) and ng-bind for span,div,etc.
So based on what I've understood from your question I've updated the code to make it "angular compliant", when you click the save button it will update the $scope variable editedEvent with the contents of that row and the selected value from the select.
plunkr
Are only name and distance sent? Then look at your convertEvent function ... you are creating a new object with to fields: name and distance.
greetings
Here's a fork with some corrections to achieve what I believe you are looking for:
http://plnkr.co/edit/HTERoyQnP2YQfjnjUVb7
In setting the editedEvent object to use the scope variables you are binding those values to those variables so they stay in sync. Because of this, the editedEvent object is changing out from under you by the time you save (everything is set back to undefined ready for the new "editing" state). Just create a blank editedEvent object and Angular will just fill those out using hg-model instead.

Emberjs handlebars content binding edit field not working

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.

Categories

Resources