Develop Reference

Binding ng-model to a Service parameter from inside a Template

I keep a data model in a service so that various controllers can use them. Inside the controller I scope it so that elements can bind to it using ng-model:
In the controller:
angular.module('hiveApp').controller('weatherController', function($scope, $rootScope, weatherModel, messageService, utilityService, $http, $timeout, $cookies, $window, $controller) {
$scope.weatherModel = weatherModel;
Then in the HTML element:
<input type="text" id="city" ng-model="weatherModel.city" />
So far so good, this works. The problem occurs when I bring a directive into the mix. I have a directive that handles a pair of radio buttons, and makes use of a template. That template attempts to use ng-model to reference that same weatherModel service parameters, however while it works from the HTML in the page itself, the directive template doesn't work:
app.directive('radiopair', function() {
return {
restrict: 'E',
template: `
<div style="color:white; float:left">
<input type="radio" id="metric" name="conversion" value="metric"
ng-model="weatherModel.conversion" selected> Metric<br>
<input type="radio" id="imperial" name="conversion" value="imperial"
ng-model="weatherModel.conversion"> Imperial<br>
</div>
`,
link: function ($scope, element, attrs) {
element.on('click', function (event) {
event.currentTarget.selected = true;
$scope.refreshTable();
});
}
}
});
When I toggle between the two buttons, the ng-model=weatherModel.conversion value never gets updated. I figure this has got to be some scoping issue but I'm hitting a wall as to how to fix it.

Instead of using a click handler to invoke the refreshTable function, use the ng-change directive:
app.directive('radiopair', function() {
return {
restrict: 'E',
template: `
<div style="color:white; float:left">
<input type="radio" id="metric" name="conversion" value="metric"
ng-change="refreshTable()"
ng-model="weatherModel.conversion" selected> Metric<br>
<input type="radio" id="imperial" name="conversion" value="imperial"
ng-change="refreshTable()"
ng-model="weatherModel.conversion"> Imperial<br>
</div>
`,
//link: function ($scope, element, attrs) {
// element.on('click', function (event) {
// event.currentTarget.selected = true;
// $scope.refreshTable();
// });
//}
}
});
Avoid manipulating the select attribute of <input> elements. That should be done by the ng-model directive and the ngModelController.

Why do dots in an Angular model name cause the controller not to be able to find it?

I'm so new to Angular that I don't understand this code.
app.controller('FileConfigController-detail',
function($scope, $http, $stateParams, FileConfigDetailsService) {
$scope.detail.inptITResourceID = "test me";
});
with this HTML:
<div class="form-group">
<label for="inptITResourceID">IT ResourceID</label>
<input class="form-control" id="inptITResourceID" type="text" ng-model="detail.inptITResourceID">
</div>
What I don't understand is why adding something with a DOT causes the code not to work?
Works fine with just one dot, but not .detail., that breaks it. Why?

You need to define details otherwise you'll get error from javascript that you can set value of undefined. you can use this code to define detail as object with inptITResourceID property:
app.controller('FileConfigController-detail',
function($scope, $http, $stateParams, FileConfigDetailsService) {
$scope.detail = {
inptITResourceID: "test me"
};
});

How value from intut/textarea/checkbox without form?

HTML:
<input ng-model='user.email' type="text" value='' />
<input ng-model='user.password' type="password" value='' />
<div ng-click='tryEnter()'>
<span>Enter</span>
</div>
JS:
.controller('enterController', ['$scope', '$http', '$q', function($scope, $http, $q) {
$scope.user = {};
$scope.tryEnter = function() {
debugger;
}
}])
Inside click function I try to get value from input by ng-model. Bot $scope not abailable inside function.

You could pass the scope of the value itself as an argument to your click handler (the tryEnter) function. There's some good answers on this StackOverflow question here: How to pass scope variable through ng-click function?

How to reset validation with angular on reset?

In our angular application we have a form with validation and a reset button. We based it off of the examples in the documentation: https://docs.angularjs.org/guide/forms
The trouble happens when someone tries to reset the form when a field is in an invalid state. My expectation is that upon reset, the field should be reset to an initial value and any validation will also be reset. However, I haven't figured out how to clear the validationl.
This can be demonstrated in the aforementioned example from the documentation: https://docs.angularjs.org/guide/forms Load the demo and type in an invalid email address (potatoes) and then press reset. It resets valid fields, but not invalid. We have tried using $setPristine() and fiddling with $valid hasn't led anywhere either. This seems like a straight forward usecase, but I have not been able to find any answers. Please someone point how the trivial solution we have overlooked!
Update: added code from https://docs.angularjs.org/guide/forms
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>

I had the same issue, and I found the solution here: https://github.com/angular/angular.js/issues/10027#issuecomment-62857430
The solution is to have all fields of the object set with empty value on the first place, and reset with the same kind of empty object instead of using {}.
Here a plunkr which show the solution:
https://plnkr.co/edit/qKAI4OlmCbu2HNM237Z3?p=preview
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function ($scope) {
function getEmpty() {
return {
name: '',
contact: {email: ''}
};
}
$scope.manufacturer = getEmpty();
$scope.reset = function() {
$scope.manufacturer = getEmpty()
$scope.form.$setPristine();
$scope.form.$setUntouched();
$scope.form.$setValidity();
}
}]);

Define default values in angularjs form, validation doesnt'work

I'm lost about define default values in my form : http://1ffa3ba638.url-de-test.ws/zombieReport/partials/popup.html
validation doesnt'work too...
/*********************************** SubmitCtrl ***********************************/
app.controller('SubmitCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
/* data pre-define : date & url for test */
$scope.myForm = {};
$scope.myForm.date = new Date();
$scope.myForm.url = "prout";
/* ng-show things */
$scope.successMailZR = false;
$scope.errorMailZR = false;
$scope.send = function() {
if ($scope.myForm.$valid) {
alert('ok');
}
};
}]);
What is the correct way for define default values ?
edit :
for url i do it like this :
<input type="text" class="form-control" name="url" placeholder="{{myForm.url}}" value="{{myForm.url}}" ng-model="myForm.url" readonly="readonly" />
it's not working

There is a conflict between a binding model $scope.myForm and the form name <form name="myForm".
Angular will assign the form's controller into the $scope as its name i.e. $scope.myForm and that override what you have initialized.
Change your form name or the binding variable to have a different name.

In HTML:
<input value="default">
Or using Angular's ng-model:
<div ng-controller="YourCtrl">
<input ng-model="value">
</div>
function YourCtrl($scope) {
$scope.value = 'default';
}