Develop Reference

ng-model value not updating in controller: Angular js

I used this technique in another place and it worked but in this case it is not working. Here lane_title shows undefined. Am I missing something here.
<input type="text" ng-model="lane_title" placeholder="Title of the lane" >
<button ng-click="testScope()">Create</button>
In controller:
$scope.testScope = function(){
alert($scope.lane_title);
}

Seems to be working fine. But make sure to initialize the model variable. Otherwise, it will print as undefined
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.lane_title = "";
$scope.testScope = function(){
alert($scope.lane_title);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="lane_title" placeholder="Title of the lane" >
<button ng-click="testScope()">Create</button>
</div>

Resolving ng-model outside the form

I have an html file with 2 form elements with input elements inside both. I would be using the ng-if to select which form element I need. The input elements are bound to the same model. But I am unable to resolve it outside the form scope.
<form ng-if="some_name == '1'">
<input ng-model="model_name">
</form>
<form ng-if="some_name == '2'">
<input ng-model="model_name">
</form>
{{model_name}} //This is different from the value of either of the input elements
//it has the initial value which i would assign : $model_name = "xyz"; in my associated js file

The reason you are not able to see those changes outside your form is because you are using 'ngIf' directive to add/remove the DOM and also the 'ngIf' directive creates a new scope.
There are two quick ways to solve this:
1) Make use of 'ngShow'. Look at the below example:
angular.module('app', [])
.controller('HomeController', function($scope) {
$scope.model_name = 'Hi';
$scope.some_name = '1';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="HomeController">
<form ng-show="some_name == '1'">
<input ng-model="model_name">
</form>
<form ng-show="some_name == '2'">
<input ng-model="model_name">
</form>
{{model_name}}
</div>
2) Make the input model an object, instead of a primitive.
angular.module('app', [])
.controller('HomeController', function($scope) {
$scope.model_name = {
value: 'Hi'
};
$scope.some_name = '1';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="HomeController">
<form ng-if="some_name == '1'">
<input ng-model="model_name.value">
</form>
<form ng-if="some_name == '2'">
<input ng-model="model_name.value">
</form>
{{model_name.value}}
</div>

Check if form input fields have not changed

I have a form, let's call it myForm similar to this:
<form name="myForm" class="vertical grid-block shrink" ng-init="initSearch()" ng-submit="doSearch(myForm.$valid)" novalidate>
And three input fields: one with keeps details, second which is a starting date and third which is a ending date.
The fields look like this:
<input id="details" type="text" ng-model="myObject.details" placeholder="DETAILS_PLACEHOLDER">
<input id="from" class="uppercase" type="text" name="from" placeholder="{{datePlaceHolder}}" ng-model="myObject.from" required/>
<input id="until" class="uppercase" type="text" name="until" placeholder="{{datePlaceHolder}}" ng-model="myObject.until"/>
And I want to display a button based on the form fields. If the form fields have not changed the button should be hidden.
I tried using $dirty but the problem is $dirty remains true even if the user types in details and then deletes the text.
Anyone has any solution for this?
Also the solution must work even if I come back to the form from another page which probably has another controller.
Any help is appreciated. Thank you

This should fix that. It checks for $pristine, ie untouched.
<button ng-show="myForm.$pristine"></button>

Take a look at sample below, basically you need $viewValue for displaying/hiding submit button.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.myObject = {};
$scope.datePlaceHolder = 'from date';
$scope.datePlaceHolder2 = 'until date';
$scope.doSearch = function() {
alert('submit');
}
$scope.initSearch = function() {
console.log('init search called');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<p>Need to fill FROM and UNTIL values to submit</p>
<form name="myForm" ng-init="initSearch()" ng-submit="doSearch(myForm.$valid)" novalidate>
<input id="details" type="text" ng-model="myObject.details" placeholder="DETAILS_PLACEHOLDER">
<input id="from" type="text" name="from" placeholder="{{datePlaceHolder}}" ng-model="myObject.from" required/>
<input id="until" type="text" name="until" placeholder="{{datePlaceHolder2}}" ng-model="myObject.until" />
<button type="submit" ng-show="myForm.from.$viewValue && myForm.until.$viewValue">Submit</button>
</form>
</div>
You can add more conditions to
ng-show="myForm.from.$viewValue && myForm.until.$viewValue"
Notice that if you delete value from input, submit button disappears

Validate input type="number" before submitting

I'm running into an interesting problem while trying to restrict user input to a number.
My HTML looks like so:
<input name="activeDate" type="number" class="form-control" ng-model="account.tag.activeDate"></input>
...and my relevant Angular controller code like so(this is inside a click handler):
tag.activeDate = moment.utc().add(tag.activeDate, tag.tagDurationType).toISOString();
Unfortunately when I click the button which submits my form and calls that click handler I get this error in my console:
[ngModel:numfmt] Expected `2015-08-27T22:09:18.919Z` to be a number
Looks like my input is checked upon submitting, when it's converted to a date within my controller. How do I limit user input to numbers without running into this?

Use ng-pattern="/^(\d)+$/" - it's simple regex expression
var app = angular.module('num', []);
app.controller('numCtrl', function($scope, $http){
$scope.digits = {};
});
angular.bootstrap(document.body, ['num']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="numCtrl">
<form class="digits" name="digits" ng-submit="getGrades()" novalidate >
<input type="text" placeholder="digits here plz" name="nums" ng-model="nums" required ng-pattern="/^(\d)+$/" />
<p class="alert" ng-show="digits.nums.$error.pattern">Numbers only, please.</p>
<br>
<input class="btn" type="submit" value="Do it!" ng-disabled="!digits.$valid" />
</form>
</body>

Select your input element, then do the following you have to look up value of number0Key and number9Key:
myElement.on("keypress", function(e) {
if (e.which < number0Key || e.which > number9Key) {
e.stopPropagation();
}
});

How select a check box on loading a page using angular

I have number of check boxes in my single page
<div class="check-outer">
<label>Place of operation</label>
<div class="checkDiv">
<div ng-repeat="place in places">
<div class="checkbox-wrapper">
<label>
<input type="checkbox" ng-model="placesOBJ[place.place_id]">
<span></span>
</label>
</div>
<label class="chk-lbl">{{place.place_name}}</label>
</div>
</div>
</div>
This is working perfectly. If data is present then i want to defaultly check this check boxes
if($scope.client.client_places){
var plcLength = $scope.client.client_places.length;
var client_places = new Array();
for(var i = 0; i < plcLength; i++){
client_places[i] = $scope.client.client_places[i]['place_id'];
}
// console.log(client_places);
//$scope.placesOBJ4 = client_places;
$scope.placesOBJ = client_places;
}
client places contain an array like {1, 2}
But this is not working. if any one know about this please help me.

You can use a directive ng-checked and pass in an expression based on the model

You can use ng-checkedto achieve what you need
<input type="checkbox" ng-model="placesOBJ[place.place_id]" ng-checked="placesOBJ">
If $scope.placesOBJ is populated (not null) then the expression is true and the checkbox will be selected

Just have a look at this simple code It will be useful for you
<body ng-app="myApp" ng-controller="HomeCtrl" ng-init="init()">
<div>
<label>Place of operation</label>
<div ng-repeat="place in places" ng-show="check">
<input type="checkbox" ng-model="placesOBJ[place.id]" ng-checked="true">
<label class="chk-lbl">{{place.name}}</label>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('myApp', []);
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.check=false;
$scope.places=[{'id':1, 'name':'place1'},{'id':2, 'name':'place2'},{'id':3, 'name':'place3'},{'id':4, 'name':'place4'}];
$scope.init=function()
{
if($scope.places)
{
$scope.check=true;
}
}
}]);
</script>
</body>
Explanation:- You can make use of ng-init="init()" to call on page load , it will check if data is present or not. If present then set ng-show="true" else by default it will be false