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>

Pass ng-model value into ng-click failed

How to pass ng-model's value to ng-click?
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
Why in my submit function it doesn't get the username's value?
http://jsfiddle.net/U3pVM/26604/

You don't need to pass username as a parameter to your function. You can get the username value from $scope.username in your function already.

Here is the correct answer:
Corrected the 'username' in alert and also while defining the method should not use paranthesis $scope.submit = function() { }
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(username) //get username here
}
});
Also you have specify the module name in the html:
<div ng-app='myApp'>
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>

There are some missings and spelling errors.
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(username) //get username here
console.log("username", username)
}
});
<div ng-app ="myApp">
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
Here is the updated Demo

There are some errors in your code
Below, find the fixed code
HTML
<div ng-app="myApp">
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
CONTROLLER
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(userame) //get username here
}
});

there are errors in your fiddle
please update your submit method as below
$scope.submit = function(username){
alert(username) //get username here
}
You are using parenthesis () after $scope.submit which is invalid declaration for function.
also give name to ng-app like
<div ng-app="myApp">
and inside alert give variable name properly , you have done spelling mistake in variable name.

There is a missing decleration of your ng-app attribute. Try this:
<div ng-app='myApp'>
In addition, correct your function name and argument typo:
$scope.submit = function(username){
alert(username)
}

This is an example of your requirement. Just test on my snippet sending value on alert().
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.submit = function(mymdl){
alert(mymdl);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="mymdl"/>
<button ng-click="submit(mymdl)">Submit</button>
</div>

Using ng-disabled on a group of inputs based on one value

I'm currently using one check box to toggle the disabled attribute on 8 form elements. I've used the ngDisabled Directive on each element. I'm searching for a way that I wouldn't have to put the directive on each of the 8 elements. Is this possible?
Checkbox Toggle
<input type="checkbox" ng-model="aircraftOnGround" />
Current working Disabled directive being used on each form element
ng-disabled="aircraftOnGround"
Codepen here:
CodePen

You can use a fieldset to disable every field inside it.
var $scope = {};
var myApp = angular.module('myApp', []);
myApp.controller('formCtrl', ['$scope', function($scope){
$scope.aircraftOnGround = 'true';
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<form ng-controller="formCtrl">
<fieldset ng-disabled='aircraftOnGround'> <!-- USE NG_DISABLE HERE -->
<input type="text">
<input type="text">
</fieldset>
<br>
<b>aircraftOnGround:</b> <button type="button" ng-click="aircraftOnGround = !aircraftOnGround"><span ng-bind="aircraftOnGround"></span></button>
</form>
</body>

You can disable a collection of DOM elements using a watcher in your controller.
myapp.controller('mainCtrl', function($scope, $element){
$scope.aircraftOnGround = false;
$scope.name = "abdullah";
$scope.$watch('aircraftOnGround',function(value) {
$element.find('.form-control').prop('disabled',value);
});
});
Note: I'm using jQuery in the example.

Revert ng-model value in Angular JS

Is it possible to revert the model value when displaying it?
My controller has this property:
this.config = {client: false, name: true};
And I want to use the values like this:
<label>
<input ng-model="ctrl.config.client"> Client
</label>
<div ng-hide="ctrl.config.client">Client</div>
I'd like to show the input checked when the config.client value is false. How can I do it?

UPDATE: If you want to check a checkbox, and you use $scope you can use ng-true-value="false" and ng-false-value="true" to revert the default values. This works only, if you use $scope instead of this! Here is an example:
<body ng-app="app">
<div ng-controller="ctrl">
<label>
<input type="checkbox" ng-model="config.client" ng-true-value="false" ng-false-value="true">
</label>
<div ng-hide="config.client">Client</div>
</div>
<script>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.config = {client: false, name: true};
});
</script>
</body>
And the plunker to try it: http://plnkr.co/edit/vRIZMb2CpDQAKHu91yhN?p=preview

If I understand correctly I think you want ng-checked.
And then negate it. So something like:
<label>
<input type="checkbox" ng-checked="!ctrl.config.client" ng-model="ctrl.config.client"> Client
</label>
I am assuming you want a checkbox although it isn't clear from your example.

How to check a radio button with angularJS?

I am creating a html / angularjs form. In the form i have a radio button with yes or no. So i want to check by default the button No.
This is the code i use :
My controller :
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myvariable = 'false';
}]);
My html code snippet:
<div class="col-lg-10">
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes</input>
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No</input>
</div>
But nothing is selected(checked) when i load the form the first time. I have to click to one value to have one selected (checked)
What's wrong with my code ? Here the plunker link
Thanks

I've made a fiddle for you. Check HERE
You should also set ng-value which should be true or false
<div ng-controller="MyCtrl">
<div ng-repeat="o in options">
<input type="radio" name="group1" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = [
{ name: 'OPT1', id: 1, checked: false },
{ name: 'OPT2',id: 2, checked: false },
{ name: 'OPT3',id: 3, checked: true }
];
}

The reason why it does not work in your plunkr is because you create a module named "radioExample" but you don't use it when you write the HTML code.
Basically, replace this -
<html ng-app>
at the beginning of the code with this
<html ng-app="radioExample">
This way, when you declare the controller, AngularJS knows which module it needs to look into to get the controller.
Note - if you had not associated your controller with a module, then your code would work.

Check out ng-checked. What you have to do is to add ng-app="radioExample" to the html-Tag of your Application.
Then add ng-checked="myvariable == 'false'" and ng-value="'value'" like in the following plunker example:
Plunker
<div class="col-lg-10">
<input ng-checked="myvariable == 'true'" type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes
<input ng-checked="myvariable == 'false'" type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No
</div>

Error in data binding. Define myvariable in controller override value in radiobutton. You must use ng-repeat like
<div ng-repeat="o in options">
<input type="radio" name="name" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
(I use code from previous answer)