I have a code like this:
<div class="form-group">
<div class="col-sm-8 col-md-offset-4">
<label class="ui-radio"><input name="radio1" type="radio" value="A" ng-model="$data.choice" ng-change="onChoice()"><span>A</span></label>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-md-offset-4">
<label class="ui-radio"><input name="radio1" type="radio" value="B" ng-model="$data.choice" ng-change="onChoice()"><span>B</span></label>
</div>
</div>
As you can see, there's a $data.choice ng-model that should trigger a "onChoice()" function when changed, defined at the controller (the ng-controller is defined at the view and works properly). The problem is that the function doesn't trigger, but if I erase the "$data" and leave it like ng-model="choice" it works perfectly.
$data is just a variable defined by me at the $scope. I can actually trigger the onChoice() with a button and ng-click, but it doesn't work with the ng-change. I guess it's a problem with ng-change but I don't know what's happening.
Edit
Ok as I see that it's not that simple, I'll add some information:
Here's my controller, It includes some interaction with the $parent controller so I don't know if that could affect:
$scope.data = $scope.$parent.data;
$scope.data.choice = $scope.data.choice || 'vote';
$scope.onChoice = function(){
//stuff
};
I know that logic when initilizing the variable seems strange but that's important, I just simplified the code. Maybe I could change my logic in order to use just $scope.choice instead of $scope.data.choice, but I still want to know why isn't this working.
Even though the "ng-model" is there, the "onChoice" function is working fine.
Once check your controller logic.
I wrote a sample program. and check out in the Plunkr
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
$scope.onChoice = function(){
alert("changed.");
};
}]);
Related
I have this as HTML:
<div class="row" ng-app="">
<form>
<input type="text" ng-model="link" name="link"
class="form-control" id="yesklinkshjhs3"
value="hello" placeholder='Link for your post.'>
</form>
<small></small>
</div>
I have created this HTML just to show the problem so there may be some mistakes but the main issue is that the textbox cant is prefilled with any value if I use the ng-model there.
If I remove the ng-model the value is there. I need the form to be prefilled to facility the editing of a post, how should I do that ??
I have tried removing the ng-model it works then but I need the ng-model there to show the realtime change in the next box.
I am new to the angular.
Here is a fiddle
http://jsfiddle.net/iamrahulkumar001/wksapfr2/
The textbox does not have any prefilled value ...
There's a few things with your JSFiddle that need to be fixed. First, you'll need to use the ng-app directive to bootstrap your application. Second, you should be registering MyCtrl as a controller. Third, you can set a default value for inputValue in your MyCtrl controller. Below is a working example demonstrating these three items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.inputValue = 'sjks';
$scope.$watch('inputValue', function(thisValue) {
$scope.inputValueEcho = thisValue;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input data-ng-model="inputValue" data-ng-trim="false" value='sjks'/>
<p>This value: ----<span data-ng-bind="inputValue"></span>----</p>
<p>This value (echo): ----<span data-ng-bind="inputValueEcho">dddddd</span>----</p>
</div>
$pristine property of the form is not updated when the hidden text is updated for first time AngularJS
I have got a form in AngularJS and I want to know if any field of the form is updated.
when a checkbox is updated, then the corresponding $pristine property is not updated.
So I added a hidden text box which is bind to same ng-model of a checkbox.
But it is not working for the first time and works from the second time on.
The HTML code is below -
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div>
<form name="myForm">
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
ng-click="onClick()"> Are you awesome?
<input type="text" name="hidden-awesome" ng-model="formData.awesome"
ng-hide="true"/>
</label>
</div>
</form>
</div>
</body>
</html>
And the AngularJS code is below -
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
$scope.onClick = function() {
alert('is myform is not modified? '+ $scope.myForm.$pristine);
console.log(JSON.stringify($scope.myForm))
};
});
I have my code in plunker here.
How should I handle this situation?
Use the ng-change directive instead of ng-click:
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶o̶n̶C̶l̶i̶c̶k̶(̶)̶"̶
ng-change="onClick()" > Are you awesome?
The ng-change directive adds a $viewChangeListener that is invoked after the user operates the control.
The ng-click directive adds a click handler that is invoked before the ngModelController updates the model.
Note: Checkboxes can be focused using the tab key and operated with the enter key as well as by clicking with the mouse.
For more information, see
AngularJS ng-change Directive API Reference
In my angular js app, I noticed that the DOM updates any time I call a function. This happens even when the function did not change any $scope variable.
I'm using an ng-repeat to create a set of checkboxes as shown below.
HTML
<a ng-click="someFunction()" >Some Function</a>
<form action="/settings/save">
<label>
<input ng-repeat="option in settings.active" name="options[]" value="{{option}}" checked="checked" />
{{option}}
</label>
<input type="submit" value="Save" />
</form>
JS
angular.module("myapp")
.controller("settingsCtrl", function($scope, $loadServ){
//$loadServ is a service for fetching data from the server
$loadServ("/settings/load")
.success(function(response){$scope.settings = response.data});
$scope.someVariable = "something";
$scope.someFunction = function(){
//There's nothing here yet
}
//More code follows
})
I noticed that all the unchecked checkboxes are checked when the "Some Function" button is clicked. I inspected the DOM and realised that all the checkboxes were re-rendered when the button was clicked.
Is there a way to update the DOM only when the $scope changes?
Note: I can't use one way binding because the $scope.settings.active can be changed by some other function
I've found the source of the error. It was caused by a filter that was applied far above the nodes
I have some HTML like this:
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
and a controller like this:
angular.module('simple-todos').controller('cboxCtrl', ['$scope',
function ($scope) {
console.log("starting");
$scope.hideChanged = function () {
console.log("in hideChanged() ");
};
}]); // end controller
It works fine and I see the message on the console when I click the checkbox. However, if I add a label around the checkbox:
<label>
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
Some text to explain the checkbox
</label>
The ng-change function does not run when I click the checkbox. I expect it has something to do with scoping but I cannot figure out what. If I replace labels with divs (which of course does not give a "nice" laýout), the ng-change function is again executed as expected.
I just created a jsfiddle with your code and it works for me.
https://jsfiddle.net/jfplataroti/hphb8c4v/5/
angular.module('simple-todos', []).controller('cboxCtrl', ['$scope', cboxCtrl]);
function cboxCtrl($scope) {
console.log("starting");
$scope.hideChanged = function() {
console.log("in hideChanged() ");
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simple-todos">
<label>
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" />some text for the label
</label>
</div>
would you mind sharing your complete code?
clicking on label also triggers ng-change, you can click the label of a checkbox/radio to check/uncheck It should trigger the scoped function.
Please check for the browser you are trying to run this code. Also do check it on other browsers you have installed. AngularJS no longer supports IE8 or earlier.
link here: https://docs.angularjs.org/guide/ie
You need to move your ng-change on the checkbox to the surrounding label's ng-click
<label ng-click="hideChanged()">
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" />
Some text to explain the checkbox
</label>
<form class="well form-search">
<input type="text" id="reference" ng-model="reference" name="reference" class="input-large search-query">
<button ng-click="getDetail(reference)" class="btn">Search</button>
</form>
I have a function that updates the reference input and gives it focus, however the ng-click function on the button fails to fire
New to angular
function reffocus(ovalue) {
$("#reference").val(ovalue);
$("#reference").focus();
}
Something like this will work (and here is a plunker):
*Note: if you already have ng-app and ng-controller setup you don't need to set them here.
<form class="well form-search" ng-app="myApp" ng-controller="Ctrl">
<input type="text" id="reference" ng-model="reference" name="reference" class="input-large search-query">
<button ng-click="getDetail()" class="btn">Search</button>
</form>
Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope) {
$scope.getDetail = function() {
// $scope.reference will be initialized by ng-model
console.log($scope.reference);
}
});
Notice how Davin did not use jQuery in his solution. If you are new to angular, you need to temporarily drop jQuery. It is a crutch and will really slow down your learning process. You might get a little frustrated but hang in there. You can do a lot of jQuery stuff with angular. I know it really helped me in the beginning. Now I use jQuery only when it is appropriate.