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?
Related
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.
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"
};
});
I want to get ng-init value from angular scope
controller
$scope.data={}
$scope.initvalue="myvalue";
Html
<input type="text" ng-model="data.value" ng-init="data.value= initvalue">
I want to set initvalue in input box and sent it to controller by ng-model(I want to able to modify this values so I need to make that)
Does this make sense?
http://jsfiddle.net/c7bsrenu/2/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data={}
$scope.initvalue="myvalue";
$scope.$watch('data.value', function(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
});
}
You can try using using $watch. Please try this demo
eg :
<div ng-controller="yourController" >
<input type="text" id="demoInput" ng-model="demoInput" ng-init="demoInput='value'" />
</div>
code in controller
var yourController = function ($scope) {
console.log('demo');
$scope.$watch("demoInput", function(){
console.log($scope.demoInput);
},1000);
}
In html
<input type="text" ng-model="data.value" ng-init="setvalue()">
In controller
$scope.data ={}
$scope.initvalue="myvalue";
$scope.setvalue= function(){
$scope.data.value = $scope.initvalue;
}
This may help for you !
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';
}
Having a super strange problem with my current build.(Angular Version 1.2.16)
Controller:
app.controller('recoverController', function(
$scope,
$rootScope,
$http,
$window,
$cookies,
$state
){
$scope.recoverAddress = 'hello';
});
View:
Works:
<input type="text" ng-model="recoverAddress" />
Fails:
<input type="email" ng-model="recoverAddress" />
AngularJS will bind to a model only when a value in the input field passes validation. As soon as you supply a valid e-mail adress model is bound, watchers are updated etc. This is how angular works
just input valid email here
<div ng-app ng-controller="testCtrl">
<input ng-model="emailInput" type="email">
<div>{{emailInput}}</div>
</div>
function testCtrl($scope) {
$scope.$watch('emailInput', function(newValue){
console.log(newValue);
});
}