I'm using a jQuery library of radio/checkbox components (yeah, I know using jQuery is bad with angular, but that was not my choice to use that library and I cannot change that) and I got a problem with refreshing ng-model data (radio component in library does a simple click trigger event when radio value change).
I noticed, that while one click trigger does nothing to model, triggering it twice solves the problem (but that is not the way I would like to solve this problem). I prepared a simple fiddle- a little example of what is my problem. First click (executing changeInput(1, 1) in the code below) on a button does a change in DOM, but does nothing to angular model - while clicking just on the radio button is doing just fine. Executing changeInput(1,2) does exacly the same as clicking the radio element.
function changeInput(obj, num){
for(var i = 0; i < num; i++){
$('input').eq(obj).click();
}
}
What else can I do? While reading stackoverflow I have noticed that people say that triggering 'input' solves the problem - but not in that case (JSFiddle). Is triggering click twice is the only way to solve this problem?
In Angular things don't work the way you might be used to. Once you get used to it, you will enjoy the much more straightforward and declarative nature of you code.
You said:
"in this question I would like only to know how to make model changes"
Nevertheless, in your attempts your are trying to make model changes by changing the view (programmatically). This is both unintuitive and a nightmare in terms of maintainability.
In Angular you should worry about your data (model) and watch the views adapt automagically.
So, if you want to make model changes, then all you need to do is to...well, change the model:
<input type="radio" name='test' ng-model="value" value="0" />
<input type="radio" name='test' ng-model="value" value="1" />
<button ng-click="changeInput(0)">Change value to 0</button><br/>
<button ng-click="changeInput(1)">Change value to 1</button><br/>
function Ctrl($scope) {
$scope.value = 0;
$scope.changeInput = function (newValue) {
$scope.value = newValue;
}
}
In order for Angular to do its magic and update the view you need to perform the action within the Angular context (ng-click instead of onclick takes care of that). If for whatever reason you can't use ng-click, you need to let Angular know something changed by wrapping your code in the changeInput() function in $scope.apply().
See, also, this short demo.
I had a similar issue once using only angular. The ng-binding of your input must be a property of an object defined in your controller. I think that otherwise, the input value is binded to a variable defined in the input own scope.
That wouldn't work :
<input type="checkbox" ng-model="selected"></input>
But that would :
<input type="checkbox" ng-model="someObject.selected"></input>
with for example in you controller :
$scope.someObject = {
selected: false
};
Related
Good Evening,
does anyone know why the input toggle switch value is being flipped to the reverse value when emitted to the parent component? I'm new to Vue, I have been working with it on and off for a few days now. It works in concept, I can see the value of the attribute in both areas using vue dev tools. However, the child value is reversed when emitted to the parent and assigned. I could immediately fix by !'ing the incoming value, but I would like to find out if anyone knows why this is occurring.
Parent Update Bind
updateMiddle(article){
this.article.meta_title = article.meta_title;
this.article.meta_desc = article.meta_desc;
this.article.published = article.published;
this.article.is_review = article.is_review;
}
Child Emit
methods: {
update() {
this.$emit('changeMiddle',this.article)
}
Input
<input id="tc-review" type="checkbox" hidden="hidden" name="is_review"
v-model="article.is_review" v-on:input="update">
The problem is that the input event fires before the v-model binding has changed the data.
Simple solution is to use the change event instead. For example
<input v-model="article.is_review" #change="update">
Simplified demo ~ http://jsfiddle.net/u20h5tzv/
Hint: Try changing it back to #input and see the difference in timing.
I am new to Angular JS. When the user check/uncheck on a check box, I am calling a function in a controller using ng-click. I am passing $event to the function in controller. Using the $event, I am able to get the srcElement inside the controller function. Now I would like to set the previous check/uncheck value to the check box based on certain conditions.
$scope.isAccessChanged = function(event){
if (some condition) {
var elem = angular.element(event.srcElement);
/** here how to set the elem value back to whatever it was before.*/
}
};
Lets say you have check box like
<input ng-model="form.isSelected" type="checkbox">
All you need to do is:
$scope.form.isSelected = !$scope.form.isSelected;
Avoid DOM manipulation and limit jQuery use as much as possible in angular.
I recommend using jQuery only in directives to make it less of an available option.
Try this out:
<input type="checkbox" ng-model="foShizzle" ng-click="isAccessChanged()"/>
$scope.isAccessChanged = function(event){
if(some condition){
$scope.foShizzle = !$scope.foShizzle; // This will reverse the user's decision
}
}
I have created custom directive drop down in angularjs and ionic-framework. In my dropdown items will open in modal popup which is working very good.
But I have kept search input box with clear button input box which is tide up with ng-model='search' and on button ng-click if I put ng-click="search=''" than it will work very good but if I put function and try to delete from directive module than it will not work
In template
<input type="search" ng-model="search" placeholder="select city...">
<button ng-show="search.length" ng-click="clearSearch()" class="customIcon button button-icon ion-close-circled input-button"></button>
In directive module
$scope.clearSearch = function() {
$scope.search = '';
}
then it will give me error
$scope.search is undefined
I am just very much confuse with $scope thing I also want to know how can i know scope any tool or something
I have also another issue that I kept two custom directive on the same and when first control change its value I want to clear the selection in second directive for that I am doing $watch also but I don't understand How can I do
My plunkr
http://plnkr.co/edit/GxM78QRwSjTrsX1SCxF7?p=preview
I have no experience with Ionic, but these types of issues are usually related to how prototypal inheritance works in JS and AngularJS.
A great explanation on prototypal inheritance in relation to Angular can be found here.
The issue can usually be solved by moving the property into an object:
$scope.viewModel = {};
$scope.clearSearch = function() {
$scope.viewModel.search = '';
};
And then use viewModel.search in your HTML where you need it:
<input type="search" ng-model="viewModel.search" placeholder="select city...">
Demo: http://plnkr.co/edit/4SLfA1CjRWB1XazIhj9d?p=info
I try to avoid any directive as I want to learn more, but I can't get it working on the save part.
partially working code here : http://jsfiddle.net/U3pVM/3789/
is it good to avoid using $index? because I use a lots of this
$scope.saveEditedTask = function(i){
this.editable = false;
}
change text field to
<input ng-show="editable" type="text" ng-model="task.name"/>
Plunker
You were not using the angular directive ng-model which bi-directionally binds the field to object.
I have an input file element within an angular view/form. I'm using ng-upload like this:
<input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)">
<input id="imgname" type="hidden" value=""></div>
Since I can't tell angular to listen for changes on input[type="file"] element, I've created the method that updates the hidden input that just holds the current filename. That way I can run my validator on the second field.
Another field I have has some sort of validator, like this:
<input ng-model="other" ng-change="chg()"/>
Now, the trouble is, if I trigger the validator, $scope.chg(), from setFile() method, I think I don't get the same scope - chg() runs, but it's as if the validator is in another scope and doesn't set my actual submit button to enabled. I tried logging from the chg() - it shows different scope then what I actually see on the view.
And if I later trigger the ng-change by changing the regular input field ("other"), it picks up the changes, or actually, it sets the submit button state correctly.
Now, I suspect this has to do with me calling the angular.element(this).scope().setFile(this) from my form instead of direct, $scope-bound method. But I cannot call $scope-bound method because it does not trigger - if I understood correctly, that's due to Angular not (yet) working with input type=file fields.
What can I do here?
I simply want to detect if there is a file or not so I can enable/disable the submit button appropriately.
I used followed flow that works for me:
<input type="file"
ng-model="upFile"
onchange="angular.element(this).scope().setFileEventListener(this)"
/>
From controller:
$scope.setFileEventListener = function(element) {
$scope.uploadedFile = element.files[0];
if ($scope.uploadedFile) {
$scope.$apply(function() {
$scope.upload_button_state = true;
});
}
}
Hope it will help.