I try to do this:
.js:
app.controller('appControler', function($scope, $http) {
$http.get(apiBaseURL + "getMyName")
.then(function(response) {
$scope.myName = response.data;
});
});
.html:
<div class="form-group">
<input class="form-control" type="text" placeholder={{myName}}
style="width:106%;" input disabled>
</div>
What I receive in the web is this:
{"getMyName":"Test Name"}
What I want is only this:
Test Name
What Im missing here?
You need to use the Dot Operator {{myName.getMyName}}
<input class="form-control" type="text" placeholder={{myName.getMyName}}
style="width:106%;" input disabled>
Related
I have form where I need validation on server side. Backend use one request to validate multiple fields.
I try to add validation message after response. Here is example:
This is my html code:
<div ng-app="MyApp">
<div ng-controller="MyController">
<form name="MyForm" novalidate ng-submit="send()">
<div>
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required>
<div ng-show="MyForm.email.$invalid">error message</div>
</div>
<input type="submit" ng-disabled="MyForm.$invalid">
<pre>{{ MyForm.email.$error | json }}</pre>
</form>
</div>
</div>
And my js code:
var myApp = angular.module('MyApp', []);
myApp.controller("MyController", ['$scope', '$timeout', '$log', function($scope, $timeout, $log) {
$scope.user = { "email" : "" }
$scope.send = function() {
$timeout(function() {
$log.log("Response from server. Multiple fields validation.");
$scope.MyForm["email"].$setValidity("server-side-error", false, $scope.MyForm)
// here I want to add something what listen once on $scope.MyForm["email"] changed
}, 1000);
};
}]);
But I need remove error when value changed. How to achieve it using Angular?
Here is example: https://jsfiddle.net/9wqhd89z/
You can call a check function whenever the user change the input using ng-change. So it will check if the email is currently invalid, and if it is it will set as valid again.
<input type="email" name="email" ng-model="user.email" ng-change="check()" required>
$scope.check = function(){
if ($scope.MyForm.email.$valid == false){
$scope.MyForm.email.$setValidity('server-side-error', true);
}
}
You can find a working version in this jsFiddle
I am using a form control which has set of input boxes.
<form class="form-horizontal" role="form">
<input ng-model="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
The value of editPagename is not getting updated in the scope and it's not even entering in the function.
$scope.$watch('editPagename', function(newVal, oldVal) {
console.log(newVal);
});
Do you have any suggestions on how to solve this problem?
try
$scope.$watch( function() {
return $scope.editPagename;
}, function(newVal, oldVal) {
console.log(newVal);
});
As it has been indicated that $scope will go bye bye in the future (you can have a read at this "preparing for the future of angularjs" on airpair, also a link the the youtube video of the ng-europe talk), and you might want to write your code for easy upgrading to 2.x
So, unless you absolutely need $scope for something, try this:
index.html
<body ng-controller="MainCtrl as vm">
<p>Hello {{vm.name}}!</p>
<div>
<form class="form-horizontal" role="form">
<input data-ng-model ="vm.name" data-ng-change="vm.checkValue(vm.name)" class="form-control" required/>
</form>
</div>
</body>
app.js
app.controller('MainCtrl', function() {
vm = this;
vm.name = "world";
vm.checkValue = checkValue;
function checkValue(value){
console.log(value);
}
});
And a plunker link with the example.
No $scope needed. And of what I can tell, does what you are asking.
Its working for me.Here what I have tried.
HTML :
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.$watch( 'editPagename', function(newVal, oldVal) {
console.log(newVal);
});
})
Its logging in the console.
EDIT CODE :
Its better to use Objec model rather than primitive datatype.
Here is the code snippet.
HTMl
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="objEdit.editPagename" class="form-control" required/>
<input ng-model="objEdit.editUrl" class="form-control" required/>
</form>
{{objEdit}}
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.objEdit = {};
})
I want to set value when query textbox is empty.
I want to do like this:
$scope.flag=0;
This is query textbox:
<input type="text" ng-model="query" ng-change="search()" />
When user types something, I set $scope.flag=1 in js file.
Hope you catch my problem. Please do needfull.
HTML
<div ng-controller="myCtrl">
<input type="text" ng-model="query" ng-change="search()" />
{{ flag }}
</div>
JS
app.controller('myCtrl', function($scope){
$scope.flag=0;
$scope.search = function() {
$scope.flag= $scope.query.length >0 ? 1:0;
}
});
Solved. I did it in this way:
<input type="text" ng-model="query" ng-change="search()" />
{{query=='' ? flag=0 : flag=1}}
You could use the ng-init directive:
<input type="text" ng-model="query" ng-init="flag=0" ng-change="search()" />
You can do it like this
$scope.search = function () {
if ($scope.query.length) {
$scope.flag = 1;
} else {
$scope.flag = 0;
}
}
I'm trying to show some editable results to the users, so I show them through an input field. This is a basic example of what I'm doing:
<div class="form-group">
<label>First number</label>
<input type="text" ng-model="first" ng-required="true" class="form-control">
</div>
<div class="form-group">
<label>Second number</label>
<input type="text" ng-model="second" ng-required="true" class="form-control">
</div>
<div class="form-group">
<label>The sum is: {{first + second }}</label>
<input type="text" ng-model="result" ng-required="true" class="form-control">
</div>
In the result's div, I used a label to test if the result is being obtained correctly, and it is. But if I edit the first or second values, the input's result doesn't update.
This is the controller used (yeah, the form is in a modal):
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.result = $scope.first + $scope.second;
$scope.confirm = function () {
$modalInstance.close(result);
};
$scope.cancelNewBet = function () {
$modalInstance.dismiss('cancel');
};
};
I thought the value was supposed to get automatically updated once I define how it is obtained. But clearly it misses something to change the result through script...
Thanks in advance.
What do you want to happen when the user edits the results input? Do you want the data binding to break (I assume not and ignore this possibility)? Do you want one of the inputs to adjust to the proper value?
If you only want to display the output, do this, in your controller:
$scope.result = function() { return $scope.first + $scope.second; }
And in your view:
{{ result() }}
But if you want the user to be able to edit the result and (let's say) have second be assigned (result - first), then you'd want something like this in your view (by the way, note the type="number"):
<input type="number" ng-change="adjustResult()" ng-model="first">
<input type="number" ng-change="adjustResult()" ng-model="second">
<input type="number" ng-change="adjustInput()" ng-model="result">
And in your controller:
$scope.adjustResult = function() {
$scope.result = $scope.first + $scope.second;
};
$scope.adjustResult(); // initialize result
$scope.adjustInput = function() {
$scope.second = $scope.result - $scope.first;
}
HTML:
<div ng-controller="TestController" >
<form name="test_form" ng-submit="submit()">
<input type="text" name="some_name" ng-model="form_data.some_name" required>
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="form_data.data_input" required>
</ng-form>
<a ng-click="addKey()">NEW KEY</a>
</form>
</div>
JS:
app.controller('TestController', function TestController($scope){
$scope.keys = [];
$scope.addKey = function() {
$scope.keys.push({});
}
$scope.submit = function() {
console.log($scope);
}
});
In submit function I can get the value of "some_name" input:
$scope.submit = function() {
console.log($scope.form_data.some_name);
}
But I can't get the values of "data_input" inputs (they are inside ngform tag). How to do that?
(ngform tag is using for ability to validate each new added input separately)
Each input inside the ng-repeat needs its own unique ng-model property -- they all can't use form_data.data_input. Here is one way to solve your problem:
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="key.data" required>
</ng-form>
$scope.addKey = function () {
$scope.keys.push({ data: ''});
}
Fiddle.
See also https://stackoverflow.com/a/14379763/215945