I have four different inputs and want to send value of changed input to controller without pressing send button or whatever.
How i got it all inputs should to have next syntaxis.
<input ng-model="borderRadius" ng-change="change()">
<input ng-model="background" ng-change="change()">
Or not?
I want to get them in my app.js
control.controller('generatorOptions', function ($scope) {
$scope.buttonStyle = {
"border-radius" : " -- here is value of it -- ",
"background" : " -- here is value of it -- "
};
});
Update: That is working just fine, but how can i optimise code? https://github.com/tanotify/Button-style-generator/blob/master/public/assets/scripts.min.js
First you need to define in your controller:
control.controller('generatorOptions', function ($scope) {
$scope.buttonStyle={};
$scope.change = function() {
console.log("borderRadius value:"+$scope.buttonStyle.borderRadius);
console.log("background value:"+$scope.buttonStyle.background);
};
});
This is your view:
<input ng-model="buttonStyle.borderRadius" ng-change="change()">
<input ng-model="buttonStyle.background" ng-change="change()">
It means, that first you need define object(buttonStyle) in you controller, than this object is accesseble in you view and in view you will define new properties(radius and background) of your object which you can access in controller by object.
Related
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.
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">
How can I pass the value of an <input type='email'> using angularjs. I need to validate the email address on the input of my form and need to generate a key with this. The only thing I need to know is how should I get the value from the input.
angular.module('myApp', [])
.controller('EmailController', function($scope) {
$scope.hash = "";
$scope.generateKey = function () {
var resultKey = $scope.email;
// TODO: generate key
// Assing value to hash
$scope.hash = resultKey;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="EmailController">
<form>
<p>Email: <input type="email" ng-model="email" ng-keyup="generateKey()"></p>
<p><b>Hash: </b>{{hash}}</p>
</form>
</div>
Edit 1
I could use <input type='text'> and validate with a regex but I want to use type='email' as in the cellphone display more options on the keyboard. Does exist a way to get the input value using angular even if it isn't a valid email?
Use ng-model-options="{ allowInvalid: true }" if you want invalid email addresses to be bound to your controller:
<input type="email" ng-model="email" ng-keyup="generateKey()" ng-model-options="{ allowInvalid: true }">
Edit: You usually shouldn't data-bind to a primitive because prototypal inheritance can sometimes lead to binding to the wrong scope. Try binding to an object instead, like data.email.
Edit: Live example
The way angular handles input values and validations is via $parsers. you can intercept the default parsers and therefore get the value before it get to the email validation. Created this little snippet to further illustrate my point. Notice that I am not using .push to add my parser but instead I am using .unshift. I use unshift rather than push because I want to make sure my parser is the first on the list. or at least, the first at the moment i added to the list. This will guarantee that it runs before the default parsers which are already in the list by the time my code runs.
var app = angular.module('myApp', []);
app.controller('EmailController', function($scope) {
$scope.hash = "";
});
app.directive('generateKey', function(){
return {
require: ['ngModel'],
link: function(scope, element, attr, ctrls){
var ngModel = ctrls[0];
ngModel.$parsers.unshift(function(text){
scope.hash = text;
return text;
});
}
};
});
for a complete snippet, please visit: https://jsbin.com/vabofapigo/edit?html,js,output
I am trying to call a function on onchange event but getting reference error everytime for that function my fromtend code is this:
<label class="item item-input item-select" ng-controller="manageTeam">
<div class="input-label">
Select Form
</div>
<select onchange="goToFormDashboard($(this).children(':selected').val())" ng-model="Formname" ng-options="f.Formname for f in forms track by f.Formid"></select>
</label>
My controller is this:
.controller('manageTeam', function($scope, $ionicLoading, $http, $timeout, $rootScope, $state) {
$scope.goToFormDashboard = function (formId) {
$ionicLoading.show({template: 'Loading'});
$timeout(function () {
$ionicLoading.hide();
}, 1500);
var formID = formId;
$scope.form.length = 0;
.....
is something missing in that?
You need to use ng-change directive & no need to use jquery here you can get the value inside ng-model, Formname contains whole object you can pass form id only by doing Formname.Formid to goToFormDashboard method.
Markup
<select ng-change="goToFormDashboard(Formname.Formid)" ng-model="Formname"
ng-options="f.Formname for f in forms track by f.Formid"></select>
In JavaScript "this" means the function, from which the actual method was called. Example:
var myObject = function();
myObject.prototype.testvar = "hello world";
myObject.prototype.test = function(){
return this.testvar;
}
var obj = new myObject();
console.log(obj.test());
this would display "hello world" in your chrome console. You dont need to pass the dropdown's value to the submit handler. just have a look at
Angular JS: Pass a form's select option value as parameter on ng-submit="doStuff()"
this is exactly what you are searching for
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)