I am unable to get the value of a selected radio button in angular controller. The reportTypeId I use in angular controller does not fetch the value of the radio button. Can someone guide me where exactly I am wrong ?
HTML
<div class="col-md-3">
<input type="radio" ng-model="reportTypeRadio" value="reportType.reportTypeId">
<a href="#reportTypeEntityList/{{reportType.reportTypeId}}">
{{reportType.reportTypeLabel}}
</a>
</div>
Controller
mdmApp.controller('Controller', function($scope, $http, $location, $routeParams) {
$scope.reportTypeRadio = reportTypeId;
$scope.viewReportTypeEntityList = function() {
$location.path('/reportTypeEntityList/' +reportTypeId);
}
});
You need to use model value from ngModel directive:
$scope.viewReportTypeEntityList = function() {
$location.path('/reportTypeEntityList/' + $scope.reportTypeRadio);
};
It worked. I just made the below changes to my html. used ng-value instead of value, and $parent in ng-model to use the parent scope of the ng-repeat directive.
<div class="col-md-3">
<input type="radio" ng-model="$parent.reportTypeRadio" ng-value="reportType.reportTypeId">
<a href="#reportTypeEntityList/{{reportType.reportTypeId}}">
{{reportType.reportTypeLabel}}
</a>
Related
I am new to Angularjs.I have a datepicker in ionic.After selecting date input is getting value of the selected date.Now i am trying to acces this value in Controller by using $scope but i am unable to access.
Here is my html
<div class="list">
<label class="item item-input">
<input type="text" data-ng-model="dateValue" disabled>
</label>
</div>
<my-calendar display="dateValue" dateformat="'yyyy-MM-dd'"></my-calendar>
<button id="fieldWork-button21" data-ng- click="saveFieldWork(fieldWork)"></button>
I am calling save function after submit.I am binding other values with fieldWork object.
Here is the Controller.js
$scope.dateValue = "";
$scope.saveFieldWork = function(fieldWork) {
fieldWork.fieldDate = $scope.dateValue;
//other code
};
Here I am not able to get selected Date value. But in the input after selecting date it is displaying correct date.
At present it is displaying empty string instead of selected date. Can anyone tell how to get this value into Controller? If AngularJs supports two way data binding then why am I not able to get ng-model value from html to Controller?
You don't have access to fieldWork variable in html, So you can not use it in data-ng-click.
<button id="fieldWork-button21" data-ng-click="saveFieldWork()"></button>
Look this
(function() {
'use strict';
angular.module('player', [])
.controller('MainCtrl', ['$scope', function($scope) {
var fieldWork = {};
$scope.saveFieldWork = function() {
fieldWork["fieldDate"] = $scope.dateValue;
console.log(fieldWork);
//other code
};
}])
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<div ng-app='player'>
<div ng-controller='MainCtrl'>
<div class="list">
<label class="item item-input">
<input type="text" data-ng-model="dateValue">
</label>
</div>
<button id="fieldWork-button21" data-ng-click="saveFieldWork()">Save</button>
</div>
</div>
I have a strange situation in which $scope variables binding do not appear to be work as expected.
Here is the HTML:
<div class="input-group" style="width:100px">
<input type="number"
class="form-control"
id="Sampling_Request_for_Current_Sampling_INPUT"
ng-model="aabbcc"
style="width:125px;text-align:center">
<span class="input-group-btn">
<button class="btn btn-default" ng-disabled="Cannot_Allocate_Yet" ng-click="Get_Sampling_Request_Details()" type="button">{{All_Labels.Common.Display}}</button>
</span>
</div>
and here is the scope function invoked upon clicking on the button:
$scope.Get_Sampling_Request_Details = function () {
console.log("$scope.aabbcc: " + $scope.aabbcc) ;
}
The variable $scope.aabbcc is initialized to 0 upon controller's loading.
Regardless what I type into the input element, I always get 0 in the console.
This scenario generally happens, If you have wrapped your HTML inside ng-if, ng-switch ng-repeat.. or some other directive that creates new child scope.
See this fiddle.
So it's a best practice to wrap your scope in some model to leverage protypical inheritance and correctly bind data to $scope.
Like : $scope.data.aabbcc = 0 and use it like ng-model ='data.aabbcc'.
See this for few minutes and Read this for complete understanding.
check this working example
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input type="number" ng-model="name"/>
<button class="btn btn-default" ng-disabled="Cannot_Allocate_Yet" ng-
click="Get_Sampling_Request_Details()" type="button">test</button>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 0;
$scope.Get_Sampling_Request_Details = function () {
console.log("$scope.aabbcc: " + $scope.name) ;
}
}
AngularJS controllers control the data. The scope is the binding part between the HTML (view) and the JavaScript (controller). You must define the ng-model inside a ng-controller within which its scope lies. Try this out.
<div ng-controller="myCtrl">
<div class="input-group" style="width:100px">
<input type="number"
class="form-control"
id="Sampling_Request_for_Current_Sampling_INPUT"
ng-model="aabbcc"
style="width:125px;text-align:center">
<span class="input-group-btn">
<button class="btn btn-default" ng-disabled="Cannot_Allocate_Yet" ng-click="Get_Sampling_Request_Details()" type="button">{{All_Labels.Common.Display}}</button>
</span>
</div>
</div>
<script>
var app = angular.module('Myapp', []);
app.controller('myCtrl', function($scope) {
$scope.Get_Sampling_Request_Details = function () {
console.log("$scope.aabbcc: " + $scope.aabbcc) ;
}
});
</script>
Declare an empty object in your controller section .
eg: $scope.obj = {};
And use like ng-model="obj.key_name" in your html. It will work.
I have checked question How to bind to list of checkbox values with AngularJS. But this question explains list of arrays and best ways to handle it in Angular controller.
<input type='checkbox' name="filter" checked>
How can we bind value to checkbox to have value as modal 0 when unchecked and 1 when checked? What should be in HTML and Controller?
$scope.filter = 0;
Try this:
$scope.filter = 0;//or 1
HTML:
<input type="checkbox" ng-model="filter" ng-true-value="1" ng-false-value="0">
Here is an modified example based on the AngularJS documentation
Controller
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.checkboxModel = 0; //Set checkbox to unchecked
}]);
HTML
<input type="checkbox" ng-model="checkboxModel" ng-true-value="1" ng-false-value="0">
Angular has provided ng-true-value & ng-false-value directives to fullfill your requirement. Through it you can associate true/false values with checkbox and same will be using by model as well.
You can try below code
<div ng-controller="ValidateCtrl">
Check Value: <input type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="checkBoxModel"/>
</div>
Controller
---------
function ValidateCtrl($scope) {
$scope.checkBoxModel = '1';
};
So initially checkbox will be checked.
I have a list of radio button values in ControllerA, printed in the view with ng-repeat. The list comes from a service. Now I want to check which radio button is selected in ControllerB.
How do I get the current selected value?
Do I need to add a $watch function in ControllerA and update the service that way?
Or is there a different way of basically binding a variable from a controller to variable in a service?
There's no need to set a $watch; it's all about sharing state between controllers.
Javascript
var app = angular.module('app', []);
app.factory('myState', function() {
// For this example I'm just returning the state directly, but it can also
// be returned from some function or even some backend api. Just remember
// that factories (services/providers) are singletons and will point always
// to the same instance within your app.
return {
chickenEgg: 'egg'
};
});
app.controller('ControllerA', function($scope, myState) {
$scope.formData = myState;
});
app.controller('ControllerB', function($scope, myState) {
$scope.result = myState;
});
Html
<div ng-controller="ControllerA">
<h2>ControllerA</h2>
<form class="form">
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
</form>
</div>
<div ng-controller="ControllerB">
<h2>ControllerB</h2>
<pre><code>result = {{ result | json }}</code></pre>
</div>
You can see it in action in this plunker.
I have a simple ng-repeat list, in which i am assigning current list item value to another property on the controller as follows:
<li ng-repeat="num in list">
<input type="text" ng-init="value = num" ng-model="value" />
<button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</li>
But when i click the Save button i get default value set for $scope.value. I expect the value for the particular input text to be displayed.
Here is the controller:
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.value = false;
$scope.list = [0, 1, 2, 3, 4];
$scope.save = function() {
alert($scope.value);
}
});
How can i access the updated value of a input item in my controller on save function call.
Here is the plunker for the same: plnkr
Update: I am expecting the value to be fetched to controller without passing it as a parameter.
Wow I can't believe most people have missed this. If you are using Angular 1.2 then you should definitely check out track by keyword in your ngRepeat directive.
<li ng-repeat="num in list track by $index">
<input type="text" ng-model="list[$index]" />
<button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</li>
Bottom line is stay away from primitive types when binding since it will give you sync issues.
Fellas please put more time and effort into researching your solutions instead of just posting for points.
Hope this helps!
ngRepeat create a scope, so, object is passed by reference and number by value.
Your code is problematic, if you successfully update the value, it will update all the numbers in ng-repeat. You can do this:
html
{{value.val}} <!-- for check the value -->
<li ng-repeat="num in list">
<input type="text" ng-model="num" />
<button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button>
</li>
javascript
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.value = {val:false};
$scope.list = [0,1,2,3,4];
});
http://jsfiddle.net/oq6zdeLd/
I'm sorry about my english...
here it is how you can do that
<li ng-repeat="num in list">
<input type="text" ng-init="value = num" ng-model="value" />
<button type="button" class="btn btn-primary" ng-click="save(value)">Save</button>
</li>
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.value = false;
$scope.list = [0, 1, 2, 3, 4];
$scope.save = function(argument) {
$scope.value = argument;
alert($scope.value);
}
});
Lets not abuse the expression "2 way binding" ;)
Your controller has one scope and there is just one $scope.value in that scope. You cannot force is to have multiple values simultaneously.
ng-repeat creates new scope for each li. And even if you try to use $parent.value, your controller's $scope.value will only have the last assigned value in ng-init
You best bet in this case to pass the value as an argument. Hope this helped to explain the issue a little more. Correct me if I am wrong.