i have a problem, Here my code
<div ng-app="pesan">
<div ng-controller="datapesan">
<input type="text" ng-model="nama" name="nama1" />
<br />
<input type="text" ng-model="telephone" name="telephone1" />
<hr />
<input type="checkbox" name="nama_same" ng-model="check" ng-true-value="Yes" ng-false-value="Tidak" />Same Buyer ({{check}})
<br />
<input type="text" ng-model="nama1"/>
<br />
<input type="text" ng-model="telephone1"/>
</div>
</div>
And my controller
var pesan = angular.module("pesan", []);
pesan.controller("datapesan", function($scope){
if($scope.check){
$scope.nama1=$scope.nama;
$scope.telephone1=$scope.telephone;
}
});
I want <input name="nama1"> has same value with <input name="nama"> and <input name="telephone1"> has same value with <input name="telephone"> with condition checkbox is checked! if checkbox not checked, each input can has different value
Try this one;
var pesan = angular.module("pesan", []);
pesan.controller("datapesan", function($scope){
$scope.$watch('check',function(){
if($scope.check === 'Yes'){
$scope.nama1=$scope.nama;
$scope.telephone1=$scope.telephone;
} else {
$scope.nama1='';
$scope.telephone1='';
}
});
});
You should use $scope.$watch to keep a look on the $scope.check variable. Once user click the checkbox, watchCheck would be invoked. Since you have defined the ng-true-value as "Yes", you have to check the checked ==== 'Yes' when the $scope.check changes.
$scope.$watch('check', function watchCheck(checked) {
if (checked === 'Yes') {
$scope.nama1=$scope.nama;
$scope.telephone1=$scope.telephone;
}
});
Here is the plunker http://plnkr.co/edit/G4H4YfwTKO1jmiFDFIu6?p=preview
var pesan = angular.module("pesan", []);
pesan.controller("datapesan", function($scope){
$scope.$watch('check',function(){
if($scope.check){
$scope.nama1=$scope.nama;
$scope.telephone1=$scope.telephone;
}
});
});
Related
View 1:
<div ng-controller="ctrl1">
<button ng-click="goToExtendedForm({'name':'aaa'})">
</button>
</div>
ctrl1:
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
$state.go('view2');
console.log(e); // prints updated value
};
View 2:
<div ng-controller="ctrl1">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
</div>
But the input box is always empty, even though to get to the view the goToForm() is called. Why doesn't it update the HTML value?
Views are changed with ui.router's $state.
From your description, your code is supposed to work. Check if you are passing the right parameter into the function. Here is a working demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
console.log(e); // prints updated value
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="goToForm({'name':'aaa'})">Change</button>
<br>
<input type="text" ng-model="selectedList.name" ng-readonly="true" />
</div>
Try adding $scope.$apply() at the end of your $scope.goToForm function
Try this ;
HTML Code
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
<button ng-click="goToForm(testUserDetails)" >Go To</button>
</button>
</div>
</div>
Define controller like this;
function ClickToEditCtrl($scope) {
$scope.selectedList = {
name: ""
};
$scope.testUserDetails ={
name: "nimal"
}
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
console.log(e); // prints updated value
};
}
Hi I am currently working on one AngularJS ionic app but facing a problem in settings up model value in the view.
It a simple form with fields defined.
<input type="number" ng-model="form.field1" />
<input type="number" ng-model="form.field2" ng-change="count=form.field1+form.field2" />
<input type="number" ng-model="form.field3" ng-init="form.field3=count" ng-value="count"/>
On third field I can see the value displayed but when submit to server it had "0" not the counted value.
In the controller I had
$scope.form={};
Any help appreciated, new to AngularJS.
You don't need ng-change. You can just watch the variable and update it using $scope.$watch. You can remove ng-init and ng-value from your inputs too.
var myApp = angular.module('myApp', []);
myApp.controller('ctrl', ['$scope', function ($scope) {
$scope.form={};
$scope.$watch('form.field1 + form.field2', function (value) {
$scope.form.field3 = value;
});
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<input type="number" ng-model="form.field1" />
<input type="number" ng-model="form.field2"/>
<input type="number" ng-model="form.field3"/>
</div>
I have created the ngchange function and post the calculation there:
<input type="number" ng-model="form.field1" />
<input type="number" ng-model="form.field2" ng-change="Myfunction()" />
<input type="number" ng-model="form.field3" />
Controller
$scope.form = {
field1: 0,field2: 0, field3: 0
};
$scope.Myfunction = function() {
$scope.form.field3 = $scope.form.field1 + $scope.form.field2;
}
Working Demo
Also we don't need count, ng-init or ng-value now.
View:
<ul ng-repeat="x in posts.post">
{{x.name}} {{x._id}} {{x.post}} {{x.user_id}}
<br>
<ul ng-repeat="y in x.comment">
{{y.comment}}
</ul>
<input type="text" style="display: none;" ng-model='new_comment.userId' value={{users2.id}} name="userId" >
<input type="text" style="display: none;" ng-model='new_comment.name' value={{users2.name}} name="userName" >
<textarea ng-model='new_comment.comment' name="comment" rows="4" cols="50">
</textarea>
<br>
<input type="submit" value="Post Comment!" ng-click="addComment(x._id, new_comment)">
</ul>
Controller:
UserFactory.getUser(function (data) {
$scope.users2 = data;
});
Factory:
factory.getUser = function(callback) {
$http.get("/user").success(function(output) {
users2 = output;
callback(users2);
});
};
I am trying to pass the hidden values of users2.id and users2.name from the controller/factory into a form. I tried ng-init, ng-value as well as input type="hidden", but none works.
So this is what I did to get it working:
View:
<form>
<textarea ng-model='new_comment.comment' name="comment" rows="4" cols="50">
</textarea>
<br>
<input type="submit" value="Post Comment!" ng-click="addComment(x._id, new_comment, users2.name, users2._id)">
</form>
Controller:
$scope.addComment = function(id, comment, userName, userId) {
var commentValue = comment.comment;
var newComment = {comment: commentValue, name: userName, userId: userId};
postFactory.addComment(id, newComment, function () {
postFactory.getComment(function (data) {
$scope.comments = data;
});
$scope.new_comment = {};
});
};
Try this
<input type="hidden" ng-model='new_comment.userId' value="{{users2.id}}" name="userId" >
And while you are changing things
UserFactory.getUser
.then(function (data) {
$scope.users2 = data;
});
with
factory.getUser = function() {
return $http.get("/user");
};
as $http returns a promise
Two way binding wouldn't work with hidden element, so I'd use ng-value to set the value of type="hidden" element
<input type="hidden" ng-value='new_comment.userId' name="userId"/>
<input type="hidden" ng-value='new_comment.name' name="userName"/>
Do something like this, return the promise.
factory.getUser = function(callback) {
return $http.get("/user")
};
Controller:
UserFactory.getUser().success(function(output) {
$scope.users2 = output.data;
});
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 searched and tried many ng-xxxx kind of options but couldn't find the one..
I just want to call some function in the controller when radio button is selected.
So it might be similar to following..(Of course, below code is not working)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
Is there any way to achieve what I want?
There are at least 2 different methods of invoking functions on radio button selection:
1) Using ng-change directive:
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
and then, in a controller:
$scope.newValue = function(value) {
console.log(value);
}
Here is the jsFiddle: http://jsfiddle.net/ZPcSe/5/
2) Watching the model for changes. This doesn't require anything special on the input level:
<input type="radio" ng-model="value" value="foo">
but in a controller one would have:
$scope.$watch('value', function(value) {
console.log(value);
});
And the jsFiddle: http://jsfiddle.net/vDTRp/2/
Knowing more about your the use case would help to propose an adequate solution.
Should use ngChange instead of ngClick if trigger source is not from click.
Is the below what you want ? what exactly doesn't work in your case ?
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = "none" ;
$scope.isChecked = false;
$scope.checkStuff = function () {
$scope.isChecked = !$scope.isChecked;
}
}
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
<span> {{value}} isCheck:{{isChecked}} </span>
</div>
In newer versions of angular (I'm using 1.3) you can basically set the model and the value and the double binding do all the work this example works like a charm:
angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="color.name" value="red"> Red <br/>
<input type="radio" ng-model="color.name" value="green"> Green <br/>
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
<tt>color = {{color.name}}</tt><br/>
</form>
</body>
</html>
For dynamic values!
<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
<label class="control-label">
<input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />
<span ng-bind="v"></span>
</label>
</div>
in controller
$scope.changeTipoAcesso = function(value) {
console.log(value);
};
Another approach is using Object.defineProperty to set valueas a getter setter property in the controller scope, then each change on the value property will trigger a function specified in the setter:
The HTML file:
<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>
The javascript file:
var _value = null;
Object.defineProperty($scope, 'value', {
get: function () {
return _value;
},
set: function (value) {
_value = value;
someFunction();
}
});
see this plunker for the implementation
i prefer to use ng-value with ng-if,
[ng-value] will handle trigger changes
<input type="radio" name="isStudent" ng-model="isStudent" ng-value="true" />
//to show and hide input by removing it from the DOM, that's make me secure from malicious data
<input type="text" ng-if="isStudent" name="textForStudent" ng-model="job">
<form name="myForm" ng-submit="submitForm()">
<label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
<div>currently selected: {{radioValue}}</div>
<button type="submit">Submit</button>
</form>