When I set initial value of variable to "0", then NumericTextBox field cant show this value.
Code:
<div ng-app="app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="value" kendo-numeric-text-box>
<br>
<input type="text" ng-model="value">
</div>
</div>
JS:
angular.module('app', ['kendo.directives']);
function MyCtrl($scope) {
$scope.value=0;
};
In jsfiddle you can see that simple text field displays zero value, but kendo NumericTextBox is empty. But if you type zero again in simple text field, then zero will be in kendo field too.
I think this is a bug, how to get around this problem?
Well, if it is a bug, you can either ask the maintainer of angular-kendo to fix it, or you can fix it yourself. It's a relatively simple fix, I think, because the link function doesn't distinguish between model values 0 and undefined. So you'd need to make sure the widget's value method is only called with null if the value is actually null or undefined:
if (typeof ngModel.$viewValue !== 'undefined') {
widget.value(ngModel.$viewValue);
} else {
widget.value(null);
}
Here's a demo with a fixed version (links to a fork of angular-kendo, mind you).
Related
I need to make some inputs by ng-repeat, and in my json file I have in object where is a property called name, like this:
"url":"find_company",
"values":[
{
"name":"company name",
"type":"input_search"
},{
"name":"company_phone",
"type":"input_search"
}
]
I want to make search in DB, in search you can find by any field or by two or more field. Field called the same as property of object. So by ng-keyup I need to send to my function
search(field, value)
two arguments. I want to do something like this
<div ng-repeat="value in param.values">
<input ng-if="value.type == 'input_search'"
ng-keyup="search(value.name, this.text)"
type="text">
How can a send to function text of this input without using ng-model? Where this.text is value of input.
since you are using ng-keyup, you can retrieve input value with $event.target.value.
comment: this is fit for normal event like onclick, but not fit for angular.
refer the below example.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.showValue = function(val) {
alert(val);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<input type="test" ng-keyup="showValue($event.target.value)">
</div>
This is how you do it with ngModel:
<div ng-repeat="value in param.values">
<input ng-if="value.type == 'input_search'" ng-model="value.val" ng-keyup="search(value)" type="text">
And in your controller:
$scope.search = function( item ) {
console.log( item.val ); // Here you have the value using ngModel
console.log( item.name ); // Here you have the "name" property of the element inside the loop
}
As you can see, you CAN use ngModel and by passing the object itself to the function you can access its properties from the function in the controller.
Note that there's that this.text in the view - I don't know what it is exactly so I dropped it from the example to make things clearer, but you can use it in your code of course.
I know the question said without using ng-model. But I suspect you may want this because you want to customize when data-binding occurs. If that's the case, you can use ng-model-options with ng-change:
<input type="text" ng-model="yourModel" ng-model-options="{ updateOn: 'keyup' }" ng-change="search()" />
ng-change fires when the model has been updated, which is after keyup in this case. So the value of yourModel will be up to date when search() executes.
I am new to angular. I have set up the following code to see if an input field has been touched. However when i type on the input field. It doesn't change. Just keeps showing false.
Not sure what I am doing wrong here. Any help would be really appreciated it.
<div ng-app='myApp' ng-form name="myForm">
<input type='text' name='address' ng-model="address" id='address'>
<h1> {{myForm.address.$touched}}</h1>
</div>
<script>
var app = angular.module("myApp",[]);
</script>
$touched in AngularJS jargon doesn't mean "was the value changed". That's $dirty's role.
$touched in AngularJS means that the field was blurred (that is, the field isn't selected anymore).
See it in action at plnkr.co.
how do I get a value of an input that is in ng-repeat? I want to be able to ng-repeat the value (as a default) but I also want to be able to change the value.
It's hard to explain what I mean but I can give you can example:
In my Directive (the relevant part):
ctrl.numbers = [1,2,3,4,5]
ctrl.myFun = function () {
console.log(ctrl.val)
};
My HTML:
<div ng-repeat="num in numbers">
<input type="text" value="{{num}}" ng-click="ctrl.myFun()">
</div>
So on click I want to get the "this" value of the input on which the function is being called. I thought this will be supereasy but every way I try to do it I get undefined. I tried to do it with scope { value : "#" } inside my directive and failed, I tried ng-model and ng-bind and failed as well.
I want to be able to attach the function to multiple fields so I don't want to hardcode any variables.
Many thanks!
Firstly, use ng-model because it's Angular and just pass the value to the function like so.
<div ng-repeat="num in numbers">
<input type="text" ng-model="num" ng-click="ctrl.myFun(num)">
</div>
ctrl.numbers = [1,2,3,4,5]
ctrl.myFun = function (val) {
console.log(val)
};
JSFiddle
I have AngularJS application. From server I am getting a JSON. I am assigning to two objects. One I am using in my form page to edit. When the user press submit, I want to check whether the new value and old are same. But whenever I update the value in form and checks, the other object value also gets updated., resulting both object becomes same always.
Here is the JSFiddle Demo. Whenever I am trying to change the value, the other value also gets updated.
What is the solution to prevent the other object to not change?
HTML
<div ng-app>
<h2>Form</h2>
<div ng-controller="MainCtrl">
<form name="myForm" ng-submit="saveForm()">
<input type="text" ng-model="obj.name">
<input type="text" ng-model="obj.value">
<input class="btn-primary" type="submit" value="Save" ng-disabled="myForm.$pristine">
</form>
</div>
</div>
JS
function MainCtrl($scope) {
$scope.obj={
name:"N1",
value:"val"};
var oldObj = $scope.obj;
$scope.saveForm=function() {
alert(JSON.stringify($scope.obj));
alert(JSON.stringify(oldObj));
if($scope.obj===oldObj){
alert("same");
} else {
alert("not same");
}
}
}
The problem is, that you just store an reference to oldObj.
So oldObj and the $scope.obj is always the same.
You need to copy it.
Check the fiddle: http://jsfiddle.net/fc0jo1so/1/
I did it with fromJson, toJson
You just change this line
var oldObj = angular.copy($scope.obj);
Try it will work. & give alert not same
Try using jQuery to make a deep copy
var oldObj = jQuery.extend(true, {}, $scope.obj);
I really like how the ng-model attribute binds directly to my model and users get instant feedback on their changes. For my use case that's perfect. However, I don't want invalid values to be put into the model where they can throw a wrench into the calculations. I somehow want the model to only be updated if the value in the form control is valid. For invalid values, it's fine for the control value to change while the model value stays fixed.
If I change the source of angular (1.2rc) NgModelController's $setViewValue implementation:
this.$setViewValue = function(value) {
...
if (this.$modelValue !== value) {
this.$modelValue = value;
...
}
};
To this:
this.$setViewValue = function(value) {
...
if (this.$modelValue !== value && this.$valid) {
this.$modelValue = value;
...
}
};
It seems to do exactly what I want, however I don't know how to do this in a proper way. What's the right way to change this behavior? Or are my attempts doomed to failure for some reason?
Update: Added example.
For example look at http://jsfiddle.net/FJvgK/1/ HTML:
<div ng-controller="MyCtrl">
{{validNumber}}
<form>
<input
type="number"
ng-model="validNumber"
required
min="10"
max="20"
/>
</form>
</div>
And the JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.validNumber = 15;
}
The number shows properly for values between 10 and 20, but I want it so that if you suddenly type '8' into the box, or delete the second digit leaving '1' the last valid number still shows above. That is, the model always has a valid value, even if the control does not.
I believe the default behaviour of AnugularJS validators are not to update the model if the value passed is invalid. If you look at the developer guide and go through Custom Validation these samples also show that the model is not update or is cleared on invalid value provided in the UI
This is default behaviour, but, you can modify this using ngModelOptions directive
<input
type="number"
ng-model="validNumber"
required
min="10"
max="20"
ng-model-options="{ allowInvalid: true }"
/>
Documentation: https://docs.angularjs.org/api/ng/directive/ngModelOptions See the section 'Model updates and validation'
As Chandermani said, it is the default behavior, here is a example that shows it in action :
<form name="myform">
<input type="text" name="myinput" ng-model="myvalue" ng-minlength="4" required>
</form>
Is the input valid ? {{ myform.myinput.$valid }} <br />
Input's value : {{ myvalue }}
{{ myvalue }} doesn't show anything until you write at least 4 characters in the input.
Best Regards.
EDIT
If you need a default value, I guess you could break down your value into 2 values, using a computed value :
var validNumber = 15;
$scope.validNumber = function () {
if ($scope.myform.myNumber.$valid) return $scope.myNumber;
else return validNumber;
};
I set up an example here : http://jsfiddle.net/7vtew/1/