$(this).val() in angular.js

Question

In jquery I use

$(this).val();

$(".input").change(function(){
      $(this).val('any value');
})

What is the angular equivalent? I want to put a value in an input text, without typing $scope.input=xxx.

I want to have a function, in which I can assign a value to the text field that has the ng-change event

http://jsfiddle.net/vhr42a19/

Generally you don't interact with elements directly with angular. So any solution that lets you do exactly that likely isn't a good one. — Kevin B, Dec 20 '16 at 19:29
You would set the value to the model property to which that input is bound. — David, Dec 20 '16 at 19:31
@David want to have a function, in which I can assign a value to the text field that has the ng-change event — yavg, Dec 20 '16 at 19:33
There is no equivalent function in Angular, because using selectors would couple the model with the view. Read [this question](http://stackoverflow.com/q/14994391/5743988). — 4castle, Dec 20 '16 at 19:38
HTML:

JS: var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.myFunction = function() { $scope.name = 'Akif'; } } — Akif Hussain Sayyed, Dec 20 '16 at 19:38

score 3 · Answer 1 · answered Dec 20 '16 at 19:38

3

You don't update the input, you update the model to which the input is bound. Given the input you have:

<div ng-controller="MyCtrl">
    <input type='text' ng-model='input' ng-click="myFunction('some value')">
</div>

This is bound to the input property on the model. As a simple example, that's a property on $scope. So you set that property to whatever you like, and then in your function you update it. Something like this:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
   $scope.input = 1;
   $scope.myFunction = function(value) {
        $scope.input = value;
  }
}

So the controller sets an initial default for the input value (which should probably have a better name) as 1. Then when your ng-click event invokes myFunction it can pass it a new value. Observe.

answered Dec 20 '16 at 19:38

David

208,112
36
198
279

What I am thinking is ng-click will be occur once on clicking on the input field, if you want to change the value by typing you should use like onchange or onkeyup type events.. BTW I am new in angularjs society :) – Akif Hussain Sayyed Dec 20 '16 at 19:42
@david Then I should do this: n times? For each input. $scope.myFunction = function (value) { $scope.input1 = value; } $scope.myFunction2 = function (value) { $scope.input2 = value; } – yavg Dec 20 '16 at 19:46
@yavg No, you can reuse the same model for each element that needs to have it. In that case you'd want to avoid using `$scope` and instead use a [component](https://docs.angularjs.org/tutorial/step_03). – 4castle Dec 20 '16 at 19:49
@4castle can you help me? I have created an example with what I understand. http://jsfiddle.net/6qyv8vyd/ mi idea is use a function for any input text. similar to $(".input").change(function(){ $(this).val('any value'); }) – yavg Dec 20 '16 at 19:51
@yavg: It's not really clear what you're necessarily trying to accomplish here. These `input` and `myFunction` things are very contrived examples with no context. If you have genuinely *separate* operations then you would create separate functions for them. But it's not clear to me what your actual operations are here. – David Dec 20 '16 at 19:51
@David i need this.. $(".input").change(function(){ $(this).val('any value'); }) but in angular.js. Any value that has this class, modifies its value. i need this in angular.js – yavg Dec 20 '16 at 19:54
1

@yavg: Take a step back for a minute. Stop trying to convert jQuery to AngularJS line by line, they are *very* different tools which do *very* different things. In your overall application, in the context of that page, with DOM elements bound to a backing model, what are you trying to accomplish? Direct line-by-line conversion isn't going to work, the tools are too different. If you want to "use AngularJS like jQuery" then just use jQuery. – David Dec 20 '16 at 19:58
@yavg: Taking a bit of a guess on the intended functionality, is this what you're looking for?: http://jsfiddle.net/6qyv8vyd/1/ – David Dec 20 '16 at 20:02
@David Okay, david. I thank you and understand what you tell me. I would understand the logic much better if you help me do what I need. How would you do it? Use the same function to assign a value to some input text http://jsfiddle.net/LtL0guqn/ – yavg Dec 20 '16 at 20:03
@David I've seen your code, but I think I tangled a little what I want to do XD. – yavg Dec 20 '16 at 20:04

$(this).val() in angular.js

1 Answers1