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
Related
<!--Below is the html code-->
<div ng-init="InitializeFields()">
<input type="text" on-click="makeOtherReadOnly('1')"
readonly="show_or_not_first"/>
<input type="text" on-click="makeOtherReadOnly('2')" readonly="show_or_not_second"/>
</div>
// Now inside javascript
$scope.makeOtherReadOnly=function(number){
if(number==='1'){
show_or_not_second=true;
show_or_not_first=false;
show_or_not_second=true;
}else if(number==='2'){
show_or_not_first=true;
show_or_not_second=false;
}
};
$scope.Initializer=function(){
show_or_not_first=false;
show_or_not_second=false;
}
$scope.Initializer();
the problem that I am facing is as I click on the input field, it should turn the other field to readonly after pafe gets loaded and we have either field clicked, but it requires two click...
Every help is appreciated.
Try changing on-click to ng-click.
You need to correct few things ion your code :
change on-click to ng-click, So your function can be called from HTML.
Change readonly to ng-readonly, So you can utilize $scope property
In your ng-init, I guess you need to call Initializer() method to initialize default value.
Further just to make 2 input box readonly, you can chieve this by 1 flag. and no string comparison.
Simple Demo :
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.makeOtherReadOnly = function(boolValue) {
console.log(boolValue);
$scope.data.first = boolValue;
};
$scope.Initializer = function() {
$scope.data = {
first: false
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="Initializer()">
First: <input type="text" ng-click="makeOtherReadOnly(false)"
ng-readonly="data.first" />
Second: <input type="text" ng-click="makeOtherReadOnly(true)"
ng-readonly="!data.first" />
</div>
</div>
There are two scopes here
javascript and angular
sometimes inside ng-click, javqascript function don't work
so change on-click to ng-click.
when user click on submit button i am validating form, using ng-click i am calling function, in this function i am passing form1.$invalid,based on this variable , i am putting condition, if condition true, validate function will call, here problem is mobile is hidden field, this hidden field also checking validation.how can skip or not validate mobile field hidden status, I tried bellow code.
html
----
<form name="form1" novalidate>
<input ng-show="user" type="text" name="user" ng-model="frm1.user" />
<p ng-show="form1.user.$error.required"><span ng-show="errorMsgShow" ng-required="true">{{requiredMsg}}</span></p>
<input ng-show="mobile" type="text" name="mobile" ng-model="frm1.mobile" />
<p ng-show="form1.mobile.$error.required"><span ng-show="errorMsgShow" ng-required="true">{{requiredMsg}}</span></p>
<button ng-click="SubmitForm(regForm.$invalid);">submit</button>
</form>
Script----
$scope.SubmitForm = function(val){
$scope.user= true;
$scope.mobile = false;
if (if(val ===true){
$scope.validation();
}
}
$scope.validation = function(){
$scope.requiredMsg="input fieldis required";
}
I suggest better approach will be taking the mobile input out of the form when it's unnecessary using ng-if rather than just hide it with ng-show.
Ng-if will make sure the input is not rendered in the DOM tree when the condition is false, therefore, there will be no validation triggered.
You can do some research on differences between ng-if and ng-show to have better understanding about these two directives.
Try ng-if to avoid validation.If you want mobile to skip validation then make ng-if as false using expression.
syntax: ng-if="expression"
go to this link for further info
https://docs.angularjs.org/api/ng/directive/ngIf
for difference between ng-if and ng-hide/ng-show refer the below link
what is the difference between ng-if and ng-show/ng-hide
Some observations :
Instead of using ng-show to hide and show the inputs just use <input type="hidden"... > element for mobile field.
No need to use variable $scope.user and $scope.mobile to hide and show the inputs.
Add the required attribute in the user input field not on mobile input field as you don't want to validate mobile field.
Use SubmitForm(form1.$invalid) instead of SubmitForm(regForm.$invalid) as your form name is form1 not regForm.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.SubmitForm = function(val) {
console.log(val);
if(val === true) {
$scope.validation();
}
}
$scope.validation = function() {
$scope.requiredMsg="input fieldis required";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="form1" novalidate>
<input type="text" name="user" ng-model="frm1.user" required/>
<p ng-show="form1.user.$error.required">{{requiredMsg}}</p>
<input type="hidden" name="mobile" ng-model="frm1.mobile" />
<button ng-click="SubmitForm(form1.$invalid);">submit</button>
</form>
</div>
I am new to AngularJS and trying to design a page which will have two text fields and two radio buttons.
First text field is for current address, followed by radio buttons(one for Yes and second for No), and last component would be permanent address text field. First, user will enter the value in current address text field, after that if user selects yes radio button then it should copy the data from current address to permanent address text field, if user selects No then it should do nothing. Below is the sample code I have written:
*<input type="text" name="cAddress" ng-model="cAddress" required/>
<input type="radio" name="opt" ng-click="copyAddress(true)" />
<input type="radio" name="opt" ng-click="copyAddress(false)" />
<input type="text" name="pAddress" ng-model="pAddress" required/>*
Below is the script code inside controller:
$scope.copyAddress = function(flag) {
if(flag) {
$scope.pAddress = $scope.cAddress;
}
};
when I tried to print $scope.cAddress and $scope.pAddress values in console then it displayed undefined. Even $scope does not have cAddress and pAddress.
Therefore, the main problem is that I am not getting element data inside AngularJS controller
Please find plunker url:
http://plnkr.co/edit/Ub2VEn01HxwDpnCg4tLi?p=preview
Click on Next to navigate to Second tab, there you will find the yes and no radio button to copy the data.
I have minized the code, please look into it. To understand the flow, you can read the README file.
http://plnkr.co/edit/TzJsZIRxAyTuFdCXLFFV?p=preview
Try using another scope object.
That is, create a scope object and add property to it for each input like,
$scope.myObject = {}; // Empty scope variable
$scope.myObject.cAddress = ""; // initialize your model for the input.
And now you should use this variable for your input.
<input type="text" name="cAddress" ng-model="myObject.cAddress" required/>
Try this. It may help you.
Html code:
<body ng-controller='Maincontroller'>
<input type="text" name="cAddress" ng-model="cAddress" />
<input type="radio" name="opt" ng-click="copyAddress(true)" />
<input type="radio" name="opt" ng-click="copyAddress(false)" />
<input type="text" name="pAddress" ng-model="pAddress" />
</body>
Controller code:
var app = angular.module('main', []);
app.controller('Maincontroller', ["$scope",
function($scope) {
$scope.copyAddress = function(flag) {
if (flag) {
$scope.address1 = $scope.address;
} else {
$scope.address1 = "";
}
};
}
]);
i fetch from json and set the value to my angular ionic app. my textbox holds the value. but im unable to get the textbox value to controller. this is how i have done it
controller.js
$http.post("http://www.fooget.com/mydetails.php).success(function(details){
$scope.mydetails= details;
});
and i set the value to my html page
<form>
<div ng-repeat="data in details|limitTo:1">
<p>{{data.f_name}}</p> <!--displays the value-->
<input type="text" ng-model="v.name" value="{{data.f_name}}"/> <!--empty values-->
<input type="text" ng-model="v.id" value="{{data.id}}"/> <!--empty values-->
<button ng-click="push(v)">
</form>
on form click i dont get the textbox values to my controller, im trying to get the vaules to the controller. it doesnt appear
$scope.push= function (v) {
var push_name = v.name; // empty values
var push_id = v.id; // empty values
}
Also in your HTML:
<div ng-repeat="data in details|limitTo:1">
It should be
<div ng-repeat="data in mydetails|limitTo:1">
as you have $scope.mydetails and not details
The real problem is in initializing the values for ng-model:
As you're just setting the value attribute in input text, it's not assigned to the ng-model. Use ng-init directive to set it in the view.
<input type="text" ng-model="v.name" ng-init="v.name=data.f_name"/>
<input type="text" ng-model="v.id" ng-init="v.name=data.id"/>
This will work for you.
I've been trying to grab hold of the Angular forms applying best practices for form validations, that forced me to use the form name and have all of the models as children of it so that I can bind the formname.$valid and all the other stuff.
However I haven't been able to set predefined values to any of the form sub models as I have no access to them in the controller.
My biggest problem right now is how to check for falsy checkboxes because initially the checkbox is unchecked but there is no value, it only gets populated when clicked to change the value.
Here is my form code
<form name="addAppForm" ng-if="creatingApp == false">
<input type="text" placeholder="App Name" required autofocus ng-model="addAppForm.appName">
<input icheck id="ios" type="checkbox" ng-init="addAppForm.iOS = false" ng-model="addAppForm.iOS">
<label for="ios"><i class="icon-apple"></i> iOS {{addAppForm.iOS}}</label>
<input icheck id="android" type="checkbox" ng-init="addAppForm.android = false" ng-model="addAppForm.android">
<label for="android"><i class="icon-android"></i> Android {{addAppForm.android}}</label>
<button ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)" type="submit" ng-click="addNewApp(addAppForm.iOS, addAppForm.android, addAppForm.appName)" class="button front-primary large radius expand">Let's GO!</button>
</form>
The "required" directive doesn't apply to the checkboxes and I've tried initializing the model but with no luck.
When you add a named form like that, it is added to your controller's scope. You can access it inside the controller using the name, similar to in the HTML:
$scope.addAppForm.android;
This should evaluate to true/false any time after the form has been set up, even if it hasn't been clicked yet.
Edit: Fiddle where form is accessed in the controller.
I've figured out what's wrong with my code, the ng-init actually works, I just mixed up the operators here -->> ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)"
Should have been ng-disabled="addAppForm.$invalid || (addAppForm.iOS != true && addAppForm.android != true)"
Still the problem persists of not being able to access the form from the controller not even in the same view outside of the form.
I still don't understand why u have to save your data in the Formcontroller u can use a object ( here i call it 'model' ) and put all your form values inside. Your Formcontroller object ( 'addAppForm' ) has functionality and saves validation errors see here : https://docs.angularjs.org/api/ng/type/form.FormController This object is added to the scope of your Controller late in the initialisation of your Controller
see: https://docs.angularjs.org/api/ng/directive/form
Directive that instantiates FormController.
If the name attribute is specified, the form controller is published onto the current scope under this name.
Here is the way to have the form invalid if not at least one checkbox is selected
var myApp = angular.module("myApp", []);
myApp.controller("myController1", function($scope) {
$scope.model = {
"ios": false,
"android": false
};
});
<div ng-app="myApp" ng-controller="myController1">
<form name="addAppForm">
<input type="text" placeholder="App Name" required autofocus ng-model="model.appName" />
<input id="ios" name="ios" type="checkbox" ng-model="model.ios" ng-required="!model.ios && !model.android" />
<label for="ios"><i class="icon-apple"></i> iOS</label>
<input id="android" name="android" type="checkbox" ng-model="model.android" ng-required="!model.ios && !model.android" />
<label for="android"><i class="icon-android"></i> Android</label>
<button ng-disabled="addAppForm.$invalid " type="submit" ng-click="addNewApp(model.ios, model.android, model.appName)" class="button front-primary large radius expand">Let's GO!</button>
</form>
</div>
<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>