I've got this code:
<input type="text" ng-model="keywords" ng-keyup="search()">
It doesn't call the search function where as, if I do ng-click="search()" it does work. Why is this?
ng-keyup works perfectly fine for me. See this fiddle for an example: http://jsfiddle.net/r74a5m25/
Code:
<div ng-controller="MyCtrl">
Hello:
<input ng-model="testModel" ng-keyup="search()"/>
</div>
function MyCtrl($scope, $log) {
$scope.search = function() {
alert('test');
};
}
Make sure you have an up to date version of angular in order to use ng-keyup. It looks like it has been available since version 1.0.8.
Try to $watch your variable
JS
$scope.$watch('search.input',function(){
$scope.doSearch('watched!'); //call your function here
});
HTML
<input type="text" placeholder="ابحث" ng-model="search.input">
Related
I am trying to convert a JQuery website to AngularJS, but I can't figure this one out.
In JQuery I used:
$('.bet').change(function(e) {
// Do someting
};
I tried to do multiple things with AngularJS but no success.
At the moment I have this in my HTML and I have nothing related in my Angular file
index.php
<input type="number" class="form-control" id="bet" name="bet" placeholder="Your bet" ng-model="bet" ng-change="bet( {{bet}} )"/>
How to do this in AngularJS?
From the documentation:
Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
So basically you need to bind a function to a ng-change attribute, like this way:
<input type="number" name="bet" placeholder="Your bet" ng-model="bet" ng-change="betChanged(bet)"/>
and the listener in your controller:
$scope.betChanged = function(bet){
//do something...
console.log(bet);
}
Like this, betChanged will be called every time bet will change, much like the native javascript input function.
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', ['$scope', function($scope) {
$scope.bet = "";
$scope.onBetChanged = function () {
alert($scope.bet);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" class="form-control" id="bet" name="bet" placeholder="Your bet" ng-model="bet" ng-change="onBetChanged()"/>
</div>
what about $watch
<div ng-app="myApp" ng-controller="myCtrl">
First Name:
<input type="text" ng-model="firstName"><br>
Full Name: {{firstName }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $window) {
$scope.$watch('firstName', function (newValue, oldValue) {
console.log('oldValue=' + oldValue);
console.log('newValue=' + newValue);
//do something
$window.alert("Event fired");
});
});
</script>
Trying to call a function A when user focuses on input field using ng-focus event, and to call function B when the user starts writing and want to capture this event using ng-change event.
<input type="text" ng-focus="functionA()" ng-change="functionB()">
What is the problem with this? Seems to be working fine for me. The only thing I see a problem is that you haven't added ng-model. It is required for the ng-change to work.
var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
$scope.functionA = function() {
console.log("Input is focused");
};
$scope.functionB = function() {
console.log("changing");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="sa" ng-controller="FooController">
<input type="text" ng-focus="functionA()" ng-change="functionB()" ng-model="myValue" />
</div>
In my Angular app, I have a form with checkbox inputs:
<div ng-repeat="partner in type.partners">
<label class="checkbox-inline">
<input type="checkbox" value="partner"
ng-checked="report.participatingPartners[$parent.$index].indexOf(partner) !== -1"
ng-click="toggleSelection($parent.$index, $index);">
<p><span></span>{{partner.name}}<p>
</label>
</div>
And in my controller, just to test this setup:
var vm = this;
vm.toggleSelection = toggleSelection;
...
function toggleSelection(typeId, partnerId) {
console.log("toggleSelection called");
console.log(typeId, partnerId);
}
This function never gets called when I click the checkbox or its label. Why is that?
I know it's not the controllerAs syntax because other functions are working fine.
The attribute you probably want to use is ng-change. The angular input directive does not have ng-clicked or ng-checked.
See docs.
By putting the function that you are trying to reference in the ng-click onto $scope rather than onto this the click event should bind as desired.
On the controller...
$scope.toggleSelection = toggleSelection;
function toggleSelection(typeId, partnerId) {
...
}
On your html...
<input type="checkbox" value="partner"
ng-click="toggleSelection($parent.$index, $index);">
Here is a simple Fiddle of it working.
You have written below code:
ng-checked="vm.toggleSelection($parent.$index, $index);"
But it should be:
ng-checked="toggleSelection($parent.$index, $index);"
Just remove "vm"
See Fiddle: http://jsfiddle.net/hejado/7bqjqc2w/
I'm trying to form.reset() my form using angular.
HTML:
<div ng-controller="formCtrl">
<form name="resetme" id="resetme">
<input ng-model="text" type="text" />
<input file-model="file" type="file" />
<button type="button" ng-click="resetForm()">reset</button>
</form>
</div>
JS:
.controller('formCtrl', function($scope) {
$scope.resetForm = function() {
//$scope.resetme.reset();
document.getElementById('resetme').reset();
};
});
Please note: I'm using this kind of form to ajax-upload a file. The page is not refreshing and I don't want to use any reset-buttons. (I'm using one in the fiddle for simplicity.) I want to call the reset-function after the fileupload is finished (via http success).
I'm using
<input type="file" />
so I can't reassign empty values to all my inputs, because file inputs are readonly.
Calling the reset() function on the DOM element works, but I was told talking to the DOM in angular would be evil, so...
I'd like to know, how this would be done the angular way. I tried naming the form and referencing it via $scope.formname but I'm not able to call Web API functions... (commented line)
How can I achieve this?
UPDATE
After reading some of the answers, I should make clear, that I am using ngModel and a custom directive fileModel to get a hold of the file-object.
Some of the solutions worked in resetting the value of the input field, but the model is not cleared (neither file, nor text). Custom directives are the answer to that, but this kinda exceeds the scope of this question.
I wrote about this topic a couple years ago. I don't know if the Angular team has yet implemented a native form reset directive but you can do so yourself. There are a couple caveats to this implementation: it only works for one model (if you need to support more see the followup post) and the issue of when to initialize the original values. Also, I never tested this with file inputs so I am not sure it would work with those.
There was an issue for this but it was closed due to inactivity. :/
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope',
function($scope) {
$scope.myModel = {
foo: 'Boop',
bar: 'Beep'
};
$scope.myModelCopy = angular.copy($scope.myModel);
}
]);
myApp.directive('resetDirective', ['$parse',
function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr.resetDirective);
var masterModel = angular.copy(fn(scope));
// Error check to see if expression returned a model
if (!fn.assign) {
throw Error('Expression is required to be a model: ' + attr.resetDirective);
}
element.bind('reset', function(event) {
scope.$apply(function() {
fn.assign(scope, angular.copy(masterModel));
scope.form.$setPristine();
});
// TODO: memoize prevention method
if (event.preventDefault) {
return event.preventDefault();
} else {
return false;
}
});
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<form reset-directive="myModel" name="form">
<input type="text" ng-model="myModel.foo" />
<input type="text" ng-model="myModel.bar" />
<input type="reset" value="Reset" />
<pre>myModel: {{ myModel | json }}</pre>
<pre>myModelCopy: {{ myModelCopy | json }}</pre>
<pre>form pristine: {{ form.$pristine }}</pre>
</form>
</div>
</body>
You can try :
reset
$scope.resetForm = function(form) {
//Even when you use form = {} it does not work
form.fieldA = null;
form.fieldB = null;
///more fields
}
Or
$scope.resetForm = function(form) {
//Even when you use form = {} it does not work
angular.copy({},form);
}
See Demo
You'd want to attach ng-model to each of your input fields then null them out via $scope. Either that or make a custom directive
I've just had a similar problem with forms not resetting. Here's what I would do:
In your resetform() function, I would include statements that set both of your ng-models in your input to "". For example:
**HTML**
<input ng-model="text" type="text" />
<input file-model="file" type="file" />
**JS**
.controller('formCtrl', function($scope) {
$scope.resetForm = function() {
$scope.text = "";
$scope.file = null;
};
});
Not certain if this will work for file-models but I'm certain it will remove the text. Best of luck!
If you don't want to use ng-model and proper reset type of button you can use this code, however this is not proper angular way to reset the form but it will work
$scope.reset = function(){
$('form').children('*').each(function(){
$(this).val('');
});
}
Here's the Plunker
To reset the form data use following code :
$scope.resetEmployeeData = function() {
$scope.employeeCred.userName = '';
$scope.employeeCred.employeeNo = '';
$scope.employeeCred.sapNo = '';
$scope.employeeCred.emailD = '';
$scope.employeeCred.mobileNo = '';
**this**.createEmployee.$setPristine();
**this**.createEmployee.$setUntouched();
};
use this rather than $scope.
I tried to implement the below functionality. There are 2 text boxes. When we type on box 1 the box 2 will also have the value of box 1 and vice versa.
using the same ng-model will do this, but I need to learn how to use elements(references) and identify them in a controller to do this
<body ng-app="myApp" ng-controller="myControl">
Name 1 : <input type="text" ng-model="name1" ng-change="change1()" />
Name 2 : <input type="text" ng-model="name2" ng-change="change2()" >
</body>
var app = angular.module('myApp', []);
app.controller('myControl',function($scope,$http){
$scope.change1 = function(){
$scope.name2= $scope.name1;
}
$scope.change2 = function(){
$scope.name1= $scope.name2;
}
});
Fiddle of the code
How can I use one function instead of using the two functions change1 and change2( I think if I pass a reference it can be done. But i could not find a way to do that) ?
Just have a look at this code you call same function on ng-change and it works fine
<body ng-app="myApp" data-ng-controller="MainCtrl" id="div1">
Name 1 : <input type="text" ng-model="name1" ng-change="change1(name1)" />
Name 2 : <input type="text" ng-model="name2" ng-change="change1(name2)" />
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope){
$scope.change1 = function(val){
$scope.name2= val;
$scope.name1=val;
}
});
</script>
</body>
By making the the ng-model value structure like object, then Javascript prototypal will do the trick, While you are assigning name1 object to name2 they both will follow the same object, as update in any of the value array will update other. Thats the reason why we don't want such feature then we uses cloning of object, In jQuery its .clone() & in angular its known as angular.copy which creates a new deep copy of the object which will not follow this rule.
Markup
Name 1 : <input type="text" ng-model="name1.value"/>
Name 2 : <input type="text" ng-model="name2.value"/>
Code
var app = angular.module('myApp', []);
app.controller('myControl',function($scope,$http){
$scope.name1= {};
$scope.name2= {};
$scope.name1= $scope.name2; //will update two object according no need of ng-change
});
Forked Fiddle