I m new in angularJS:
When I change the value of my input, in my console I don t have the new value.
How can I get the new value of my input when I change it?
controller.js:
$scope.nam = guillaume;
$scope.firstchange = function(){
$scope.displayed = {'display':'block'};
console.log($scope.nam);
};
home.html:
<input ng-change="firstchange()" ng-model="nam" class="param-right"></input><p>Prénom</p>
You have to pass the model as a parameter to your handler.
controller.js
$scope.nam = guillaume;
$scope.firstchange = function(nam){
$scope.displayed = {'display':'block'};
console.log(nam);
};
home.html
<input ng-change="firstchange(nam)" ng-model="nam" class="param-right"></input><p>Prénom</p>
Related
Here is controller code:
$scope.FormData.Quantity = $scope.sum();
Here is HTML Code:
<input type="text" name="FormData.Quantity" ng-model="FormData.Quantity" />
Displaying blank textbox. How to assign?
you have assign function to ng-model , which may not returning anythinmg , try this one...
$scope.FormData = {};
$scope.sum = function(){
return "whatever";
};
$scope.FormData.Quantity = $scope.sum();
Inside main.view.html I have button Edit:
<md-button class="md-raised md-primary" ng-click="redirectEdit($index)" >Edit</md-button> which has redirectEdit($index) so it takes index of current line (to have values) in main.controller.js it looks like:
$scope.redirectEdit = function(index){
$scope.all[index];
window.location = "../ang/#!/edit";
$scope.name =$scope.all[index].name;
$scope.surname =$scope.all[index].surname;
$scope.email =$scope.all[index].email;
$scope.review =$scope.all[index].review;
};
with this method I want to redirect user to Edit form And have these specific taken entered into input fields.
First Name: <input type="text" ng-model="name" >
I tried doing it like this but that doesn't work
Looking at your scenario, i would suggest you to use $emit and $on.Also make a object of all fields like $scope.formFields = {};
$scope.redirectEdit = function(index){
$scope.all[index];
$scope.formFields = {};
$scope.formFields.name =$scope.all[index].name;
$scope.formFields.surname =$scope.all[index].surname;
$scope.formFields.email =$scope.all[index].email;
$scope.formFields.review =$scope.all[index].review;
$scope.$emit('userData', {data: $scope.formFields}); //to set the value
window.location = "../ang/#!/edit";
};
And on editController.js get the data and accordingly assign values to ng-model
$rootScope.$on('userData', function (event, data) {}); // to get the value
I hope this helps
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
I tried to get the HTML page value to angularJS function , The below steps are which i tried.
HTML page :
<label class="item-input item-stacked-label">
<span class="input-label cont_det_label">First Name</span>
<p class="contact_display" id="txtFirstName" ng-model="testName">Satya</p>
</label>
angularJS Page :
.controller('SocialNetworkCtrl', ['$scope','$http','$state','ContactsService','$ionicNavBarDelegate','$ionicLoading','$ionicPopup',function($scope, $http, $state, ContactsService, $ionicNavBarDelegate, $ionicLoading,$ionicPopup) {
$scope.showUserProfile = function() {
$state.go("linkedin");
var firstname = (document.getElementById("txtFirstName").value);
}
}])
So I need var firstname = Satya ?? Is it correct way please guide me to access this value .
var firstName = $scope.testName
<input ng-model="testName" />
testName is the ng-model name that you have give. It will be automatically binded to your controller. No need the get the value using document.getElementById
Wrong usage , why ng-model in <p> tag??
Update
Change your fiddle with the following code, it will work. Also make sure framework is selected properly (as in the image)
<div ng-app ng-controller="testController">
<input ng-model="testDataName" ng-change="check()" /> {{testDataName}}
After ng-change : {{checkName}}
</div>
function testController($scope) {
$scope.testDataName="Dummy Name";
$scope.check = function () {
$scope.checkName=$scope.testDataName;
console.log($scope.checkName);
};
}
its a text node, you will require .innerHTML or '.innerText', .value is for form inputs
var firstname = (document.getElementById("txtFirstName").innerHTML);
and don't use ng-model on a p element, change it to like this
<p class="contact_display" id="txtFirstName">{{testName}}</p>
just use $scope.testName to get the value, no need for firstname = (document.getElementById("txtFirstName").innerHTML); querying DOM for value is jQuery style, use angular the $scope for 2 way bindings
Read more at official doc
Update here is updated function on loginCtrl
.controller('loginCtrl', ['$scope', function ($scope) {
$scope.testNameData = 'Satya';
$scope.doLogin = function() {
alert($scope.testNameData);
};
}])
If you really want to go jQuery way here is what you can do, its not recommended, you should use angular directive to do DOM manipulation
$scope.showUserPro = function() {
$ionicLoading.show();
// Here i need the value of <p tag>
var name = document.getElementById("txtFirstName"),
firstNameFromHtmlPtag = name.innerText;
console.log(firstNameFromHtmlPtag, 'Doing API Call 1');
}
I want to replace text in html with a value from a controller
The original text string is image.name, which is the image title
Via a click event from the 'GoToImage' controller, the span should replace the
image.name with newName
Now, it only adds the newName, but doesn't replace the image.name
Markup:
<div data-ng-controller="GoToImage">
<span data-ng-model="newName">
{{image.name}}
{{newName}}
</span>
</div>
the controller:
.controller('GoToImage', function ($scope) {
$scope.newName = {};
$scope.newDescription = {};
$scope.selectedIndex = 0;
$scope.setImage = function(index) {
$scope.selectedIndex = index;
$scope.newName = $scope.series.images[index].name;
$scope.newDescription = $scope.series.images[index].description;
}
});
also, I cannot get rid of the {} signs which show by default before the click event is fired
You could try creating a new property that returns the current value that should be used.
$scope.nameDisplay = image.name
Then later in your code you can update the nameDisplay property to the value of newName and your UI can just bind to {{nameDisplay}}.