My ng-model is not getting updated why - angularjs

Hey guys here is my code it is not running at all i can't understand i just want to understand why it is not running
http://plnkr.co/edit/vvv3aavAopBhXlc1miUI
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.user=$scope.name;
console.log($scope);
});

This line is wrong:
$scope.user=$scope.name;
You are trying to assign the value of one property on your scope (user) from a non defined property (name)
I think you should be using this kind of approach
app.controller('MainCtrl', function($scope) {
$scope.user="user"
$scope.name="name";
console.log($scope);
});
For demo purposes this will hard code 'user' and 'name' in your input fields, but if you are trying to capture values entered by the user you will probably be using a button with a click handler and in the handler function you can access the user and name values on your scope for further processing, e.g. submit to server via $http

From what I understand you want the second update field to get updated when you type something in the first.
Why it is not working now?
At the moment you are only assigning the value of $scope.name to $scope.user when the controllers loads at start (undefined). You are not watching the value and assigning it to $scope.user when it changes so the value of $scope.user does not update.
Some options on how to make it work
You could use the ngChange directive
In your HTML:
<input type="text" ng-model="name" ng-change="updateUser()">
<input type="text" ng-model="user">
in your controller:
$scope.updateUser = function() {
$scope.user=$scope.name; }
ng-change (Plunkr)
Or (depending on what you are trying to achieve), you could give them the same ng-model:
<input type="text" ng-model="name">
<input type="text" ng-model="name">
same ng-model (Plunkr)

Related

Angular JS - How to change the value of an input from the event of another element

I have this html:
<div ng-controller="My.MarkdownEditorController">
<a target="_default" ng-click="changeValue()" class="btn btn-info">Copy Organisation Address to Member</a>
</div>
The Angular controller for the click is:
angular.module("umbraco").controller("My.MarkdownEditorController",
function ($scope, $http) {
$scope.changeValue = function () {
//changes value but it doesn't save
//what is the Angular way to do this correctly
document.getElementById('title').value= document.getElementById('title').value + '2';
};
});
How do I change the value of the adjacent text box with id "title" correctly?
The above code modifies the value, but it doesn't save.
I think that's because I am not changing it the Angular way.
The html of the input I am trying to modify is:
<input type="text" id="title" name="textbox" ng-model="model.value" class="umb-property-editor umb-textstring textstring ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-val-server ng-not-empty ng-valid-required" val-server="value" ng-required="model.validation.mandatory" aria-required="false" aria-invalid="False" ng-trim="false" ng-keyup="change()">
I got this working but not sure if it is correct:
angular.module("umbraco").controller("My.MarkdownEditorController",
function ($scope, $http) {
$scope.changeValue = function () {
var title = $("#title");
title.val("this is how to do it");
setTimeout(function(){ title.trigger("input") }, 10);
};
});
Your input: <alue" ng-keyup="change()">
You have javascript value model.value and html input value. These two are connected via ng-model:
After you change scope value $scope.model.value = ... angularjs will update html input value.
After user changes html input value, angularjs will update your scope value.
You should nealy never change html input value directly, you should change scope value (it wont trigger ng-keyup or ng-change).
P.S. avoid using ng-keyup in inputs - there is copy-paste and drag-drop that may change input as well.

AngularJS - How to pass data from View (HTML) to Controller (JS)

I am really new to AngularJS. I want to pass some object from View (HTML) to my controller (JS).
Actually my Client will send me data in HTML and I have to take that data and process that data in my controller and then display the processed output on screen. He will be using some back-end technology called ServiceNow - https://www.servicenow.com/ .
All the solutions I saw had some event like click event or change event, but in my case this has to be done on page load.
I m using Input type hidden for passing the data to the controller, seems like it's not working.
So is there any other way I can do this ?
Here's the code I am trying to use
<div ng-controller="progressController" >
<input type="hidden" value="ABCD" ng-model="testingmodel.testing">
</div>
app.controller('progressController', function($scope) {
console.log($scope.testingmodel.testing);
});
It says undefined when I console.log my variable in Controller.
You're doing console.log(...) too early. At this time your controller doesn't have any information from the view.
The second problem is that you're binding the view to a variable in controller and not the other way around. Your $scope.testingmodel.testing is undefined and it will obviously the value in the view to undefined.
Solution
Use ng-init to initialize the model and the controller's hook $postLink to get the value after everything has been initialized.
Like this
<div ng-controller="progressController" >
<input type="hidden" ng-model="testingmodel.testing" ng-init="testingmodel.testing = 'ABCD'">
</div>
app.controller('progressController', function($scope) {
var $ctrl = this;
$ctrl.$postLink = function() {
console.log($scope.testingmodel.testing);
};
});
Edit: extra tip
I don't recomment using $scope for storing data since it makes the migration to newer angular more difficult.
Use controller instead.
Something like this:
<div ng-controller="progressController as $ctrl" >
<input type="hidden" ng-model="$ctrl.testingmodel.testing" ng-init="$ctrl.testingmodel.testing = 'ABCD'">
</div>
app.controller('progressController', function() {
var $ctrl = this;
$ctrl.$postLink = function() {
console.log($ctrl.testingmodel.testing);
};
});
You should use the ng-change or $watch
<div ng-controller="progressController" >
<input type="hidden" value="ABCD" ng-model="testingmodel.testing" ng-change="change()">
</div>
app.controller('progressController', function($scope) {
$scope.change = function(){
console.log($scope.testingmodel.testing);
}
});
Or:
app.controller('progressController', function($scope) {
$scope.$watch('testingmodel.testing', function(newValue, olValue){
console.log(newValue);
}
});
If you use ng-change, the function is only called if the user changes the value in UI.
If you use $watch anyway, the function is called.
You can't use value attribute for set or get value of any control, angularJS use ngModel for set or get values.
Here You should try like this way
app.controller('progressController', function($scope) {
//from here you can set value of your input
$scope.setValue = function(){
$scope.testingmodel = {}
$scope.testingmodel.testing = 'ABCD';
}
//From here you can get you value
$scope.getValue = function(){
console.log($scope.testingmodel.testing);
}
});
if you want to bind from html side then you should try like below
<input type="text" ng-model="testingmodel.testing">
<input type="hidden" ng-model="testingmodel.testing">

Getting value of ng-change field in my angularjs controller

I have this line in my view:
<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">
And then inside my controller I have:
angular.module('app.controllers', [])
.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {
$http.get('http://www.domain.co.uk/api/search.php').
then(function(response) {
$scope.food = response.data;
});
$scope.searchChange = function() {
console.log($scope.mySearch);
};
}])
But this is giving me "undefined".
How can I reference the value of the mySearch input field in my controller?
Your input field might be located within a sperate scope, which is not updated correctly. ngIf and ng-repeat are common examples for directives creating a separate sub-scope. (See this article for more information around scopes)
Dotted scope variables
To protect yourself from such issues you might either store your variables inside objects.
<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="my.search" ng-model-options="{debounce: 1000}">
$scope.my = {search: ""};
$scope.searchChange = function() {
console.log($scope.my.search);
};
Named Controllers
Or name your controllers specifically as recommended in the angular style guide Y030.
Pass variable as parameter
A third option is simply passing the variable as parameter to the function:
<input placeholder="Search" type="text" ng-change="searchChange(mySearch)" ng-model="mySearch" ng-model-options="{debounce: 1000}">
$scope.searchChange = function(mySearch) {
console.log(mySearch);
};

angularjs databinding for uploadcare.com doesnt work

I'm trying to integrate an upload script into my page. Im using uploadcare.com. They provided a simple directive but I just can't get it to work:
https://github.com/uploadcare/angular-uploadcare/blob/master/angular-uploadcare.js
I'm setting ng-model="test" and in my controller I have the following:
angular.module('testApp')
.controller('MyCtrl', function ($scope) {
$scope.test = "test";
});
The html code looks like that:
<uploadcare-widget ng-model="test" data-public-key="xyz" />
When I check Firebug I can see that the widget works:
<input type="hidden" role="uploadcare-uploader" ng-model="test" data-public-key="6e0958899488d61fd5d0" data-crop="1200:630" value="http://www.ucarecdn.com/ca5513da-90f1-40d1-89e7-648237xxxxxx/-/crop/2560x1344/0,128/-/preview/" class="ng-isolate-scope ng-valid">
But this input value is never populated back to my "$scope.test". Why is that?
When I output $scope.test it still says "test" instead of my image path value.
You can use $watch in angular
$scope.$watch('test', function(newValue, oldValue) {
console.log($scope.test);
});
Or the function provided by uploadcare
$scope.onUCUploadComplete = function(info){
console.log(info);
};
Which is a callback function after image is uploaded
Please check the scope of test model.
You can also update scope variable inside directive like
scope.test = $element.value()

angularjs - undefined error from input text field

Trying to initialize text input box for user input but getting error. $scope can set intext when uncommentted. I've hacked around this (sort of) but I'm missing something basic as usual.
Console error starts: 'Error: $scope.intext is undefined' unless I assign a value. The input box is exclusively for user input. Also noticed I can assign 'why' and don't get the error until I try to split.
angular.module('myApp', [])
.controller('TextScreen', ['$scope', function($scope) {
//$scope.intext = "what";
var why = $scope.intext.split('-');
}]);
html
<div id="cont" ng-app="myApp">
<div ng-controller="TextScreen">
<input type="text" ng-model="intext" />
</div>
</div>
The reason is that $scope.intext is undefined. intext.
It is unclear what you are trying to do but I would suggest initializing intext or moving your code to a function. Like this:
$scope.change = function() {
var why = $scope.intext.split('-');
};
html
<input type="text" ng-model="intext" ng-change="change()" />
Like suggested in angular documentation here:
http://docs.angularjs.org/api/ng.directive:ngChange
Or try using ng-init
ng-init="intext= 'demo'"
Sample
<input type="text" ng-model="intext" ng-init="intext= 'demo'" />
O
The
var why = $scope.intext.split('-');
is being processed immediately, but at that moment, $scope.intext is undefined, therefore you cannot call .split on it.
If you are trying to act on the value the user enters, you should place a watch on it
$scope.$watch('intext', function(oldvalue, newvalue){
if(angular.isDefined(newvalue) && newvalue != oldvalue) //ensuring undefined should not processed
var why = newvalue.split('-');
});

Resources