See this Plunkr : http://plnkr.co/edit/YAQooPn0UERDI5UEoQ23?p=preview
Type text as "_______what___ever_____"
(without quotes & _ represents spaces.)
Angular is removing spaces (from front & back & not in between) from the model (which is my desired behavior), but my textbox is keeping the spaces.
how can I remove the spaces from the textbox also ? i.e. I want the textbox also to reflect the value in model.
Edit: Better explanation of my needs.
For Eg:
If I typed "___What_Ever____" ( without quote & _ is space),
1) my textbox will show me same what i have typed i.e. "___What_Ever____"
2) while my model will show me "What Ever".
I want my textbox's value also to be as "What Ever".
HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery#1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<input type="text" ng-model="modelVal">
<br>
model value is "{{modelVal}}"
</body>
</html>
JS :
angular.module('app', [])
.controller('MyCtrl', function($scope) {
$scope.modelVal="";
})
Would this work? - Plunker
ng-blur doesn't work with your Plunker because the version of AngularJS you are loading (1.0.7) is quite old. I replaced it with the latest version (1.5.6). I also use ng-trim="false" to get the correct text input by the user.
Markup
<body ng-controller="MyCtrl">
<input type="text" ng-model="modelVal" ng-change="change()" ng-blur="blur()" ng-trim="false">
<br>
model value is "{{newModelVal}}"
</body>
JS
angular.module('app', [])
.controller('MyCtrl', function($scope) {
$scope.modelVal="";
$scope.change = function () {
$scope.newModelVal = $scope.modelVal;
}
$scope.blur = function () {
$scope.modelVal = $scope.newModelVal.trim();
}
})
You can do this,
<body ng-controller="MyCtrl">
<input type="text" ng-change="modelVal = modelVal.split(' ').join('')" ng-model="modelVal">
<br>
model value is "{{modelVal}}"
</body>
DEMO
EDIT:
You can use ngTrim which is provided by Angular itself
<input type="text" ng-trim="true" ng-model="modelVal">
<br> model value is "{{modelVal}}"
DEMO
Related
How to copy input, select in other input all together ?
I have image please check for more information.
I don't know if I can properly answer to your question. Here is the following code, written in Angular.JS
Script.js
var myApp = angular.module("myModule",[])
myApp.controller("myController",function($scope){
$scope.cartype="";
$scope.caryear="";
$scope.carcolor="";
$scope.carvalue="";
});
demo.html
<html ng-app="myModule">
<head>
<title>welcome</title>
<script src="./angular.min.js"></script>
<script src="./script.js"></script>
</head>
<!-- ng-app is an directive which autobootstraps angularjs application
its a starting point of angularjs application -->
<body ng-controller="myController">
car type: <input type="text", ng-model="cartype"/>
car year model: <input type="text", ng-model="caryear"/>
car color: <input type="text" , ng-model="carcolor"/>
car value: <input type="text", ng-model="carvalue"/>
final : {{cartype}}
{{caryear}}
{{carcolor}}
{{carvalue}}
</body>
</html>
I am implementing below radio button in my project. I am using angularjs tech.
Once I am loading the page on browser but value is not coming in JSON object.I already i given as attribute in the tag as checked="true".
when i am clicking once again on the radio button that time json object coming with value.
<input type="radio" ng-model="formModel.internationalClient" ng-value="1">Yes
<input type="radio" ng-model="formModel.internationalClient" ng-value="0" ng-checked="true">No
json object before clicking radio button
{}
after click the radio button
{
"internationalClient": 0
}
So, ActuallyI want the value once i am loading the page on browser.
I want below result once i am opening my page on browser.
{
"internationalClient": 0
}
If this is a single form model (not repeated), just initialize in your controller:
$scope.formModel.internationalClient = $scope.formModel.internationalClient || 0;
It's shorthand for: "Set ..internationalClient to itself, unless ..internationalClient is null". That way, if it is an international client and the value is returned, this operation is idempotent.
If it's a form in ng-repeat, etc:
<form ng-init="formModel.internationalClient = 0">
Reference: https://docs.angularjs.org/api/ng/directive/ngInit
Here's the plnkr for your case.
https://plnkr.co/edit/TPbYAr0h3BIXQ1RzuMrv?p=preview
Hope this helps.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-radio-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="radioExample">
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.formModel = {
internationalClient : 0
}
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>
<input type="radio" ng-model="formModel.internationalClient" ng-value="1">
Yes
</label><br/>
<label>
<input type="radio" ng-model="formModel.internationalClient" ng-value="0" ng-checked="true">
No
</label><br/>
<tt>json = {{formModel}}</tt><br/>
</form>
</body>
</html>
In your Javascript file you can set the default value
$scope.formModel.InternationalClient = 0;
Then have your radio buttons change the value
I know how to pass a value from a view to a controller using ng-model. In the controller it just gets the value from the view using this code $scope.name = this.ngmodelnameinview.
Is it compulsory to use ng-model in field view?
but my problem now is, I have + button, which when I click the button it will automatically put the value inside input text field.
<button data-ng-click="adultCount = adultCount+1"> + </button>
<input type="text" name="totTicket" value="{{adultCount}}">
see picture below:
but when I add ng-model inside input field, it returns null
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
How to fix this? Thanks!
It is giving null just because you have set a value "adultCount" and in ng-model you had given a different name "adultcount" ('c' is in lower case). By updating ng-model with "adultCount", will solve this issue.
JavaScript is case sensitive:
JavaScript is case-sensitive and uses the Unicode character set.1
Use the same case for the scope variable. Update the input attribute ng-model to match the varible - i.e.:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
should be:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
<!-- ^ -->
See this demonstrated in the snippet below:
angular.module('app', [])
.controller('ctrl', function($scope) {
//adultCount could be initialized here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button data-ng-click="adultCount = adultCount+1"> + </button>
totTicket:
<input type="text" name="totTicket" value="{{adultCount}}">
totTicket (adultCount):
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
</div>
——
1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types
SITUATION:
This is just an example of what I'm trying to accomplish in a real project, where I get an array of names from a web service, then I locate the inputs with those names, select them and then set their values using jQuery.
PROBLEM:
What I need is to know how to update the ng-model of those fields which I changed their value attribute using jQuery
I have tried these
Update Angular model after setting input value with jQuery
Angular model doesn't update when changing input programmatically
Update HTML input value changes in angular ng-model
...but I haven't had luck with any of those options.
I'm using AngularJS v1.4.8 and jQuery v1.11.1
I have tried setting the input type to hidden and type text with style: display:none but I can't get it working properly.
Here is a demo of what I'm trying to do. This has and input and an span bind with the same ng-model.
When you click the button, it's supposed to change the input value using jQuery and then update the ng-model.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body data-ng-app="app">
<div data-ng-controller="myCtrl as ctrl">
<span>Value: {{ctrl.myValue}}</span>
<input name="myId" type="hidden" data-ng-model="ctrl.myValue" />
<button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
</div>
<script>
//my controller
angular.module('app', [])
.controller('myCtrl', function(){
var vm = this;
vm.wizard = {
changeValue: fnChangeValue
}
return vm.wizard;
function fnChangeValue(newValue){
var e = $('#myId');
e.val(newValue);
e.trigger('input'); //first option
//e.triggerHandler('change'); //second option
}
});
</script>
</body>
</html>
Fixed ID and added jQuery's change() which is probably what you tried to do. Below you can find your code fixed. And here is how this is usually done with AngularJS alone: https://jsfiddle.net/rwtm1uh9/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="myCtrl as ctrl">
<span>Value: {{ctrl.myValue}}</span>
<input id="myId" data-ng-model="ctrl.myValue" />
<button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
</div>
<script>
//my controller
angular.module('app', [])
.controller('myCtrl', function() {
var vm = this;
vm.wizard = {
changeValue: fnChangeValue
}
return vm.wizard;
function fnChangeValue(newValue) {
var e = $('#myId');
e.val(newValue);
e.change();
}
});
</script>
</div>
You write var e = $('#myId'); and inside your input there is
<input name="myId" type="hidden" data-ng-model="ctrl.myValue2" />
I think you missed the id attribute try this instead :
<input id="myId" type="hidden" data-ng-model="ctrl.myValue2" />
I would like to ask, how can i get selected value from radio list?
I tried ng-change, and watch scope, but i get always only first value which is set into the model during the app initi.
Here is example of my code:
Radio button group:
<div class="list" ng-contoller="SettingsCtrl">
<ion-radio ng-model="choice" ng-value="'dials'">Dials</ion-radio>
<ion-radio ng-model="choice" ng-value="'conversations'">Conversations</ion-radio>
<ion-radio ng-model="choice" ng-value="'appoitnments'">Appointments</ion-radio>
<ion-radio ng-model="choice" ng-value="'orders'">Orders</ion-radio>
</div>
JS:
// Default choice scope
$scope.choice;
$scope.$watch('choice', function(value) {
// Here i get always the same value
console.log("Selected goalType, text: " +value);
});
How can i get selected value and set this value into the scope?
Thanks for any help.
Without using ionic framework and with input radio buttons, it is working.
You've just make a mistake on this line <div class="list" ng-contoller="SettingsCtrl">.
You've forgotten an r in controller.
Here is the code working :
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<div class="list" ng-controller="SettingsCtrl">
<input type="radio" ng-model="choice" ng-value="'dials'">Dials
<input type="radio" ng-model="choice" ng-value="'conversations'">Conversations
<input type="radio" ng-model="choice" ng-value="'appoitnments'">Appointments
<input type="radio" ng-model="choice" ng-value="'orders'">Orders
</div>
</body>
</html>
And JavaScript :
var app = angular.module('app', []);
app.controller('SettingsCtrl', function($scope){
$scope.choice;
console.log('ctrl');
$scope.$watch('choice', function(value) {
// Here i get always the same value
console.log("Selected goalType, text: " +value);
});
});
You can see it working here :
http://plnkr.co/edit/TRJKW7eOlBek6TditM1B?p=preview
EDIT
I've tested it with ionic framework. It is also working. So it was just the r the issue.
I've made this fiddle for you. When you select a radio, $scope.currentSelection changes and this way you'll know which is the current selected goal.