I am presenting a simple yes/no answer question to my users and I want to have a default radio button selected. The problem is that I could have any number of these questions presented to the user.
This is my code:
<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]">
<div data-ng-repeat="option in closeListingOptions" class="radio">
<label>
<input type="radio" name="close" ng-model="i.close" value="{{option.id}}" ng-checked="option.checked" />{{option.name}}</strong>
</label>
</div>
</div>
My options are set as follows:
$scope.closeListingOptions = [
{
id: "1",
name: "Yes please",
checked: true
},
{
id: "0",
name: "No thanks",
checked: false
}
];
The above example works and check/sets "yes" as the default answer. However unless I manually select an option via a mouse click the value is not binding to the model.
I have read that ng-select should not be used with ng-options but i am not sure how else I can achieve this goal? It seems that I need something like:
i.close = "1":
But how can I set this for an unknown quntity since I don't know how many question will be presented?
1- Instead of value={{something}} you can use ng-value directive.
2- Each input pack should have its specific name.
Here is a working example:
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.offers = [{
number: 1
},
{
number: 2
}
];
$scope.closeListingOptions = [{
id: "1",
name: "Yes please",
checked: true
},
{
id: "0",
name: "No thanks",
checked: false
}
];
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-form ng-repeat="i in offers" name="messageForm[$index]">
<div data-ng-repeat="option in closeListingOptions" class="radio">
<label>
<input type="radio" name="close-{{i.number}}" ng-model="i.close" ng-value="option.id" ng-checked="option.checked" />{{option.name}}</strong>
</label>
</div>
{{i}}
<hr>
</div>
</body>
</html>
You should try this:
<input type="radio" name="close"
ng-model="option.checked" value="{{option.id}}"
ng-checked="option.checked" />{{option.name}}</strong>
This ng-model will updated the checked key of your data array and then you can fetch all the radio button selection as per their ids from that single variable.
Hope this helps.
I was able t achieve my goal with the following:
<div data-ng-repeat="option in closeListingOptions" class="radio" ng-init="i.closeListing = 1">
<label>
<input type="radio" name="close-{{i.id}}" ng-model="i.closeListing" ng-value="{{option.id}}" />
<strong>{{option.name}}</strong>
</label>
</div>
The solution was to use ng-init
Related
Let's say I have this question object:
$scope.question = {
id: 1,
question: 'q?',
required: true,
control: {
type: 'multiple_check',
options: [{
value: '1st option'
}, ... ]
}
}
And this form:
<form name="s.form" novalidate>
<h1>{{ question.question }}</h1>
<label ng-repeat="option in question.control.options">
<input type=" name="xxx"
ng-model="question.answer[$index]" ng-required="question.required" />
{{ option.value }}
</label>
</form>
And I'm stuck now with validation.
I've created a pen for this.
{{ s.form.$valid }} should give me true when form is valid, but it returns true only when all checkboxes in group are checked
{{ s.form['xxx'].$valid }} should give me true when at least one checkbox is checked, but it actually returns true only when the last checkbox is checked
I want to be able to choose at least one checkbox (one or more) from the group. When at least one is checked the form and group will be valid.
How can I achieve that? Already tried many things but can't make this to work.
Thanks.
You can make your own validation by watching checkbox as bellow
$scope.$watch( "question.control.options" , function(n,o){
var trues = $filter("filter")( n , {value:true} );
$scope.flag = trues.length;
}, true );
Notice: The value of a checkbox must be a boolean so change your question's value as
$scope.question = {
id: 1,
question: 'q?',
required: true,
control: {
type: 'multiple_check',
options: [{
value: false,
label: '1st option'
}, ... ]
}
}
and your view as
<form name="s.form" novalidate>
<h1>{{ question.question }}</h1>
<label ng-repeat="option in question.control.options">
<input type=" name="xxx"
ng-model="question.control.options.value" ng-required="question.required" />
{{ option.label }}
</label>
</form>
here is a fiddle make this approach
This was actually hard but I think it works now.
Here's working demo
For those who want to know I've included this module in my app.
Then changed the HTML code to:
<form name="s.form" novalidate>
form valid? <b>{{ s.form.$valid | json }}</b>
<div ng-repeat="question in questions">
<h1>{{ question.question }}</h1>
<label ng-repeat="option in question.control.options">
<input type="checkbox" name="xxx_{{ question.id }}"
checklist-model="question.answer" checklist-value="option" ng-required="question.required && !question.answer.length" />
{{ option.value }}
</label>
<p>question valid? {{ s.form['xxx_'+question.id].$valid | json }}</p>
answer: {{ question.answer }}
</div>
</form>
I have a simple filter where I want to select a particular value and type and make other calls using that. Here is a close representation of what I have in my view (I am not using ng-repeat to create these radio buttons).
<form>
<label>
<input type="radio" name="ptf" ng-value="cntrl.filter.today_filter" ng-model="cntrl.filter.filter_value"> Today
</label>
<label>
<input type="radio" name="ptf" ng-value="cntrl.filter.hour_filter" ng-model="cntrl.filter.filter_value"> Last
</label>
<select ng-model="cntrl.filter.hours" ng-options="num for num in cntrl.filter.time_range"></select>
<label> hours</label>
<label>
<input type="radio" name="ptf" ng-value="cntrl.filter.date_filter" datepicker="" ng-model="cntrl.filter.filter_value">Select a Date
</label>
<button class="btn btn-info float-right" ng-click = "cntrl.refreshData()" >Update</button>
</form>
This basically gives me 3 options where I can select either today, or last n hours or another date. Here is the relevant code from my cntrl.
vm.filter = {
today_filter: {
type: 'today',
value: 1
},
date_filter: {
type: 'date',
value: 2
},
hour_filter: {
type: 'hours',
value: 3
},
hours: 8,
today: getFormattedDate(vm.current_date),
time_range: [],
filter_value: {
type: 'today',
value: 1
}
};
Now I have filter_value (ng-model) set as an object with type today and value 1. So I am expecting that by default my radio button with value of cntrl.filter.today_filter should be selected. And as I select other radio buttons, the filter_value object should update accordingly. Of course this is not happening. Is there some basic thing that is wrong here? Any pointers on how to fix this or maybe a different approach on this?
There are a few things wrong with your code:
You use the wrong aliasses for your controller in your view (spDashboardCntrl and cntrl)
Use the actual same object as the initial value instead of a new object that just looks the same.
For clarity, see the working example below.
angular.module('app',[])
.controller('myController', function() {
var vm = this;
vm.filter = {
today_filter: {
type: 'today',
value: 1
},
date_filter: {
type: 'date',
value: 2
},
hour_filter: {
type: 'hours',
value: 3
},
hours: 8,
today: '', //getFormattedDate(vm.current_date),
time_range: []
};
vm.filter.filter_value = vm.filter.today_filter;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="myController as vm">
<form>
<label>
<input type="radio" name="ptf" ng-value="vm.filter.today_filter" ng-model="vm.filter.filter_value">Today
</label>
<label>
<input type="radio" name="ptf" ng-value="vm.filter.hour_filter" ng-model="vm.filter.filter_value">Last
</label>
<select ng-model="vm.filter.hours" ng-options="num for num in vm.filter.time_range"></select>
<label>hours</label>
<label>
<input type="radio" name="ptf" ng-value="vm.filter.date_filter" datepicker="" ng-model="vm.filter.filter_value">Select a Date
</label>
<button class="btn btn-info float-right" ng-click="vm.refreshData()">Update</button>
</form>
{{vm.filter.filter_value}}
</div>
</div>
In AngularJS - I have dropdown code as below. type.entityTypeId field is a long data type. The dropdown works fine in the create page and able to insert the 'type.entityTypeId' field into the DB.
But it does not work while reloading the same data in the Edit page with same code.
Is this problem because I have the datatype as Long ?
I have other drop downs working fine in which I have all String data type.
<div class="form-group">
<label class="control-label col-md-2 required">ENTITY TYPE</label>
<div class="col-md-2">
<select name="entityType" class="form-control" ng-model="entity.entityType.entityTypeId"
required="required">
<option value="">Please select</option>
<option ng-repeat="type in entityTypes" value="{{type.entityTypeId}}">{{type.entityTypeName}}</option>
</select>
</div>
<span style="color: red" ng-show="entityAddForm.entityType.$invalid"> <span
ng-show="entityAddForm.entityType.$error.required">Entity type is required.</span>
</span>
</div>
Updated:
This is a json used to load the drop down data. And you can see the entityTypeId is a number. In other cases it works if the id is a String.
[
{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
},
{
entityTypeId: 1,
entityTypeName: "Legal Entity"
},
{
entityTypeId: 2,
entityTypeName: "Notional Entity"
}
]
As per the documentation at: https://docs.angularjs.org/api/ng/directive/select
It looks like you do need to use a String at the moment.
Using numbers should not be an issue. I know that the documentation only uses string, but I'm able to use the same using number.
<div ng-app="myApp" ng-controller="myController">
<select ng-model="entity.selected">
<option value="{{ent.entityTypeId}}" ng-repeat="ent in entityTypes">{{ent.entityTypeName}}</option>
</select>
Selected entity id {{entity.selected}}
</div>
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) {
$scope.entityTypes = [{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
}, {
entityTypeId: 1,
entityTypeName: "Legal Entity"
}, {
entityTypeId: 2,
entityTypeName: "Notional Entity"
}];
$scope.entity = {
selected: 3
};
}]);
JSFiddle
I'm trying to programmatically update the selected item from my controller and it's not working. When I click the submit button, all it does is clear out the select. What I expect is that the second option (Perth) gets selected.
Look at this plunker for more info. http://jsfiddle.net/ky5F4/
Thanks
<div ng-controller="MyController" ng-app>
<div>Number of datasets= {{datasets.length}}</div>
<div>
<select class="dataset" size="1" ng-model="selectedDataset">
<option ng:repeat="dataset in datasets" value="{{dataset.name}}">
<h3>{{dataset.name}}</h3>
</option>
</div>
<input type="button" value="submit" ng-click="Select()"></input>
</div>
function MyController($scope) {
$scope.datasets = [{
id: 'id-1',
name: 'Brisbane'
}, {
id: 'id-2',
name: 'Perth'
}, {
id: 'id-3',
name: 'Melbourne'
}];
$scope.selectedDataset = 'id-1';
$scope.Select = function () {
alert('testing');
$scope.selectedDataset = 'id-2';
}
}
Use ng-options instead of ng-repeat.
<select class="dataset" size="1" ng-model="selectedDataset"
ng-options="dataset.id as dataset.name for dataset in datasets">
Working fiddle
You can see the docs here
I've been playing with Angular.js recently and decided to check all the checkboxes once parent checkbox is checked, which I've done using ng-model and ng-checked directives.
<div ng-app>
<div ng-controller="Ctrl">
<input type="checkbox" ng-model="parent"/> Select All<br/>
<input type="checkbox" ng-model="child_1" ng-checked="parent" ng-click="getAllSelected()"/> First<br/>
<input type="checkbox" ng-model="child_2" ng-checked="parent" ng-click="getAllSelected()"/> Second<br/>
<input type="checkbox" ng-model="child_3" ng-checked="parent" ng-click="getAllSelected()"/> Three<br/>
<input type="checkbox" ng-model="child_4" ng-checked="parent" ng-click="getAllSelected()"/> Four<br/>
<input type="checkbox" ng-model="child_5" ng-checked="parent" ng-click="getAllSelected()"/> Five<br/>
</div>
</div>
Now I'm trying select all the parent checkbox once all the child checkboxes are checked but facing some issues.
function Ctrl($scope) {
$scope.getAllSelected = function () {
var chkChild = document.querySelectorAll('input[ng-model^="child_"]').length;
var chkChildChecked = document.querySelectorAll('input[ng-model^="child_"]:checked').length;
if (chkChild === chkChildChecked) $scope.parent= true;
else $scope.parent= false;
}
}
Demo: http://jsfiddle.net/codef0rmer/QekpX/
Can we make the above code more robust?
The ng-checked attribute in the checkbox takes in an expression. So you can give an expression with and/or conditions, as mentioned below to make it checked based on an expression.
<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>
You dont have to write a seprate function to do the computation when every child checkbox is clicked.
Here is example in jsfiddle
Visually it updates all the checkboxes checked with ng-selected, but then when you go to actually submit the data the data doesn't match up with what was selected. I suggest doing a ng-click() which sucks, but if your data is dynamic.
http://codepen.io/stirlingw/pen/gpwXWM
//Random JSON object
$scope.labels =
[{
label: 'Death Row Records',
selected: false,
artists: [
{artist: 'MC Hammer', selected: false},
{artist: 'Andre "Dr. Dre" Young', selected: false},
{artist: 'Snoop Dogg', selected: false},
{artist: 'Tupac Shakur', selected: false},
{artist: 'Nate Dogg', selected: false},
]
}];
//JS
$scope.clicker = function(label){
label.artists.forEach(function(e){
e.selected = !label.selected;
});
};
//html
<ul>
<li ng-repeat="label in labels"> <input type="checkbox" ng-model="label.selected" ng-click="clicker(label)"> {{label.label}}
<ul>
<li ng-repeat="artist in label.artists">
<input type="checkbox" ng-model="artist.selected" > {{artist.artist}}
</li>
</ul>
</li>
</ul>