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;
}
}
Related
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.
I have a directive that makes use of jquery events on the element parameter of the link function, this directive has an input that is binding to a value that is obtained from the main controller of the page, passed through nested directives in a isolated scope , but when changing the value in the input is not reflected in the original object from controller.
The object has the following structure:
Invoice 1:
- Product 1
- Product 2
Invoice 2:
- Product 3
- Product 4
When I change the amount of the invoice, the value is updated in the main controller, but when I change the amount of the product the change is not reflected.
This is my directive, what you should do is that when the user clicks on the value an input appears to be able to edit the value of the model:
eFieldTemplate.html
<div>
<div ng-if="IsMouseIn">
<input type="text" ng-model="value" class="form-control input-sm" />
</div>
<div ng-if="IsMouseOut" ng-click="OnMouseClick()">
{{value}}
</div>
<div ng-if="MouseClick">
<input type="text" ng-model="value" class="form-control input-sm" />
</div>
eFieldDirective.js
angular.module("appDirectives").directive("eField", function () {
return {
restrict: "E",
templateUrl: "eFieldTemplate.html",
scope: {
value: "="
},
controller: function ($scope) {
$scope.IsMouseOut = true;
$scope.IsMouseIn = false;
$scope.MouseClick = false;
$scope.OnMouseEnter = function () {
if (!$scope.MouseClick) {
$scope.IsMouseOut = false;
$scope.IsMouseIn = true;
$scope.MouseClick = false;
}
}
$scope.OnMouseLeave = function () {
if (!$scope.MouseClick) {
$scope.IsMouseOut = true;
$scope.IsMouseIn = false;
$scope.MouseClick = false;
}
}
$scope.OnMouseClick = function () {
$scope.IsMouseOut = false;
$scope.IsMouseIn = false;
$scope.MouseClick = true;
}
$scope.EndEdit = function () {
$scope.IsMouseOut = true;
$scope.IsMouseIn = false;
$scope.MouseClick = false;
}
},
link: function (scope, el, attrs) {
el.on("mouseenter", function () {
scope.OnMouseEnter();
scope.$apply();
});
el.on("mousemove", function () {
scope.OnMouseEnter();
scope.$apply();
});
el.on("mouseleave", function () {
scope.OnMouseLeave();
scope.$apply();
});
el.on("click", function () {
scope.OnMouseClick();
if (el[0].querySelector('input'))
el[0].querySelector('input').select();
scope.$apply();
});
}
};
});
Any Suggestions?
I give the example here: Plunker
UPDATED
I found a solution using ngIf, and is to reference a variable from the parent scope using $ parent.value. Eg.
<Input type="text" ng-model="$parent.value" class="form-control input-sm" />
Or also referring to another object eg.
<input type="text" ng-model="value">
<div ng-if="IsMouseIn">
<input type="text" ng-model="value">
</div>
Here is the reference link: what is the difference between ng-if and ng-show/ng-hide
using ng-if makes it create/destroy new html nodes and it seems to be unable to cope with that. change to ng-show and it will work. i also added a body mouse capture so it ends the edit.
<div>
<div ng-show="IsMouseIn">
<input type="text" ng-model="value" class="form-control input-sm" />
</div>
<div ng-show="IsMouseOut" ng-click="OnMouseClick()">
{{value}}
</div>
<div ng-show="MouseClick">
<input type="text" ng-model="value" class="form-control input-sm" />
</div>
view plunker
If you want to use ng-if not ng-show still, define $scope.values and $scope.config and use like this. To avoid the ng-if problem you should define an object.
<div>
<div ng-if="config.IsMouseIn">
<input type="text" ng-model="values.value" class="form-control input-sm" />
</div>
<div ng-if="config.IsMouseOut" ng-click="OnMouseClick()">
{{values.value}}
</div>
<div ng-if="config.MouseClick">
<input type="text" ng-model="values.value" class="form-control input-sm" />
</div>
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;
}
});
});
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
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>