This question already has answers here:
How do I bind to list of checkbox values with AngularJS?
(29 answers)
Closed 7 years ago.
I have html code, which displays content in grid format, that is a row with three columns each, and each input field would be able to check. However, i am not able to check multiple checkboxes with below code. Whatever checkbox i choose, only the first box in the list is triggered and checked. Others remain ng-prestine. What would be the issue with my code
<table>
<tr ng-repeat="(key, allergyList) in filteredAllergies track by $index">
<td ng-repeat="allergy in allergyList track by $index">
<div class="ice-form-checkbox">
<input id="condition" ng-model="selectedAllergy" type="checkbox"/><label for="condition"><span>{{allergy.allergyName}}</span></label>
</div>
</td>
</tr>
</table>
You are giving only one single variable as a model to the checkboxes. You should atribute an array, like this: (Run the Code Snippet to see it working)
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options =
[
[{id: 1}, {id: 2}, {id: 3}],
[{id: 4}, {id: 5}, {id: 6}],
[{id: 9}, {id: 8}, {id: 9}]
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="row in options">
<td ng-repeat="item in row">
<p>Op {{item.id}}</p>
<input ng-model="item.value" type="checkbox" />
</td>
</tr>
</table>
<div ng-repeat="row in options">{{row}}
<br>
</div>
</div>
The model, selectedAllergy, exists in the main scope. Set it to "allergy.selected".
You are using ng-repeat and then have a fixed ID on your input so, every input allergy in allergyList will have id="condition" which is incorrect HTML
This may be causing the effect of only being able to select one checkbox. Try changing it to a class and see what happens.
Related
I have a checkbox group with 3 items. I created it with Angular 5.0.5 and Clarity vm. I want my function to check if at least one of the checkboxes is checked and THEN go at the next page, which is a wizard. Until now the wizard opens without checking if at least one checkbox is selected.
My html looks like this:
<table class="table">
<tbody>
<tr *ngFor="let item of items">
<td>
<input type="checkbox" name="allowNext" [(ngModel)]="item.chosen">
</td>
<td>
{{item.name}}
</td>
</tr>
</tbody>
</table>
<br>
</form>
<button [disabled] class="btn btn-primary" (click)="go()"> Next </button>
my Typescript for it looks like this:
items= [
{name: 'checkbox1', chosen: false},
{name: 'checkbox2', chosen: false},
{name: 'checkbox3', chosen: false}
];
go() {
if(this.items.chosen === true) {
this.wizard.open();
ngOnInit () {}
constructor( public router: Router) {}
could you guys please help me define the function correclty?
this.items.some(i => i.chosen)
will check if at least one item is chosen
With JQuery you can simple do this :
if ($('#frmTest input:checked').length > 0 ) {
//your code
}
Please find the attached fiddle where I want to post a warning mesaage "No data to display" if the filter fais to match any results in the button clicks.
Fiddle ng-repeat filter
I have given condition for both table and message so that they should be displayed as and when the clicks happen.
<div ng-show="name===null">No results</div>
The above message should be displayed if there are no satisfying data in the table based on link clicks,together the table should be hidden.
I tried to give conditions based on property name but its not working.
Check your fiddle http://jsfiddle.net/w0L4o8jm/6/
By default I am making filter with Fruit. You can change it in the controller.
Coming to the answer, Calculate the filtered items length according to the filter. If length 0 or name '', then show no results. Otherwise show results in the table. Just copy paste the below code in your fiddle and check it out.
<html ng-app="app">
<a ng-click="name = 'Fruit'">Fruit</a>
<a ng-click="name = 'Nut'">Nut</a>
<a ng-click="name = 'Seed'">Seed</a>
<body ng-controller="main">
<a ng-click="name = ''">clear filter</a>
<br> <br> <br>
<div ng-show="(name=='' || !filtered.length)">No results</div>
<div ng-repeat="link in filtered = (links|filter:name)"></div>
<table class="table" ng-show="(filtered.length != 0 && name!='')">
<thead>
<tr>
<th>Target</th>
<th>Level</th>
<tr>
<tbody>
<tr ng-repeat="link in links|filter:name">
<td>
{{link.name}}
</td>
<td>
{{link.category}}
</td>
</tr>
</tbody>
</table>
</body>
Controller code
var app = angular.module('app', []);
app.controller('main', function($scope) {
$scope.filters = { };
$scope.name='Fruit';
$scope.links = [
{name: 'Apple', category: 'Fruit'},
{name: 'Pear', category: 'Fruit'},
{name: 'Almond', category: 'Nut'},
{name: 'Mango', category: 'Fruit'},
{name: 'Cashew', category: 'Nut'}
];
});
For Angular prior to 1.3
Assign the results to a new variable (e.g. filtered) and access it:
<div ng-repeat="link in filtered = (links|filter:name)"></div>
For Angular 1.3+
Use an alias expression (Docs: Angular 1.3.0: ngRepeat, scroll down to the Arguments section):
<div ng-repeat="link in links|filter:name as filtered"></div>
Try to use this code
Demo
<body ng-app="app" ng-controller="main">
<a ng-click="name = 'Fruit'">Fruit</a>
<a ng-click="name = 'Nut'">Nut</a>
<a ng-click="name = 'Seed'">Seed</a>
<a ng-click="name = ''">clear filter</a>
<br> <br> <br>
<div ng-show="name ==''">No results</div>
<table class="table" ng-show="name!=''">
<thead>
<tr>
<th>Target</th>
<th>Level</th>
<tr>
<tbody>
<tr ng-repeat="link in links | filter:name">
<td>
{{link.name}}
</td>
<td>
{{link.category}}
</td>
</tr>
</tbody>
</table>
var app = angular.module('app', []);
app.controller('main', function($scope) {
$scope.filters = { };
$scope.name = '';
$scope.links = [
{name: 'Apple', category: 'Fruit'},
{name: 'Pear', category: 'Fruit'},
{name: 'Almond', category: 'Nut'},
{name: 'Mango', category: 'Fruit'},
{name: 'Cashew', category: 'Nut'}
];
});
Here you go! Updated fiddle
You had a few issues in there:
your ng-controller was on a div but you were setting name outside controller
<div ng-show="name===null">No results</div> Here you were comparing name with null but you were setting it to empty string in clear filter
Hope it helps!
Edit: On clear filter it was not showing all the items. Fixed and updated fiddle
I am trying to set two ng-repeat loops, one of which, the nested one, is a select/option drop down. I checked other similar posts, but still not sure how to define the ng-model in HTML to get/set the default value/option in the select box.
<table>
<tr ng-repeat="student in studentList">
<td>{{student.name}}</td>
<td>
<select ng-model="courseSelected">
<option ng-repeat="course in courseList" value="{{course.id}}">{{course.name}}</option>
</select>
</td>
</tr>
</table>
Both studentList and courseList come from the database tables, and the student table/object has a courseId column/reference. In other words, the default selected course and the changed course option (if this happens) would have the logic behind them : student.courseId = course.id
Any help is appreciated.
<select ng-model="student.courseId" ng-options="course.name as course.id for course in courseList">
This should get you what you're looking for. I assumed that a course has the name property. But you can alias the course with any property you like in the ng-options directive. More documentation can be found here.
I think you should use ng-options in tag like:
<select ng-model="courseSelected" ng-options= "course.id for course in courseList">
maybe you should read these documentation for more explanation :
https://docs.angularjs.org/api/ng/directive/ngOptions
https://docs.angularjs.org/api/ng/directive/select
var editer = angular.module('app', []);
function myCtrl($scope) {
$scope.studentList = [{
id: 1,
name: 'Jack'
}, {
id: 2,
name: 'Terry'
}, {
id: 3,
name: 'Rosa'
}, {
id: 4,
name: 'Holt'
}];
$scope.courseList = [{
id: 1,
name: 'Course1'
}, {
id: 2,
name: 'Course2'
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl" class="container">
<table>
<tr ng-repeat="student in studentList">
<td>{{student.name}}</td>
<td>
<select ng-model="student.courseSelected" ng-options="course as course.name for course in courseList">
</select>
</td>
<td>
{{student.courseSelected.name}}
</td>
</tr>
</table>
<label class="item item-input">
<span class="input-label">Select date</span>
</label>
<pre>{{dateOption}}</pre>
</div>
reading on ng-checked attribute I realize we can use angular expressions to determine wether a checkbox is checked or not.
I have images and dates. I want to make a table representing which image is active at a specific date. this sql fiddle should help you understand what I mean.
In the fiddle, the four checkboxes are checked, but one of them (the one corresponding to the first image and the 'feb' date) should not be checked, since 'feb' is not in the dates of the first image (see the $scope definition below)
My problem is that the expression date = image.dates in the ng-checked attribute always return true, hence the four checked checkboxes.
What expression could I use to verify that a specific date is in the image's defined dates?
I can change the data model, so if it would be easier to have the dates of a specific image as an array rather than a string please go ahead.
view
<div ng-controller="MyCtrl">
<table>
<tr>
<td style="width:80px;"></td>
<td style="width:35px;" ng-repeat="date in dates">{{date}}</td>
</tr>
<tr ng-repeat="image in images">
<td>{{image.name}}</td>
<td ng-repeat="date in dates">
<input ng-checked="date = image.dates" type="checkbox" />
</td>
</tr>
</table>
</div>
app
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.images = [
{name:'Image 1',dates:'jan'},
{name:'Image 2',dates:'jan,feb'}
];
$scope.dates = [
"jan",
"feb"
];
}
You will have to check if the dates contains the date expression.
Something like this:
<tr ng-repeat="image in images">
<td>{{image.name}}</td>
<td ng-repeat="date in dates">
<input ng-checked="image.dates.indexOf(date) > -1" type="checkbox" />
</td>
</tr>
I am new to Angular, and I would like to do some non-trivial input validation.
Basically I have a table. Each row contains three text inputs. When the user types into any text inputs, I would like to check whether the table contains at least one row with three non-blank input fields. If it does, I want to show a message.
I have no idea how to do this cleanly in Angular, any help would be much appreciated.
This is my HTML:
<tr data-ng-repeat="i in [1,2,3,4,5]">
<td data-ng-repeat="i in [1,2,3]">
<input ng-model="choice.selected" ng-change='checkAnswer(choice)' type="text" />
</td>
</tr>
...
<div ng-show="haveCompleteRow">we have a complete row!</div>
And controller:
$scope.haveCompleteRow = false;
$scope.checkAnswer=function(choice){
$scope.haveCompleteRow = true; // what to do here?
}
Here is a plunker demonstrating the issue: http://plnkr.co/edit/Ws3DxRPFuuJskt8EUqBB
To be honest, I wouldn't call this form validation. But for starters, it would be a lot simpler if you had a real model to observer, instead of an array in the template. The way you started will, or at least could, lead you to dom-manipulation inside the controller, which is a no-go for angular.
A simple first sketch with a model could be:
app.controller('TestCtrl', ['$scope', function ($scope) {
$scope.rows = [
[{text: ''}, {text: ''}, {text: ''}],
[{text: ''}, {text: ''}, {text: ''}],
[{text: ''}, {text: ''}, {text: ''}]
];
$scope.haveCompleteRow = false;
// watch for changes in `rows` (deep, see last parameter `true`).
$scope.$watch('rows', function (rows) {
// and update `haveCompleteRow` accordingly
$scope.haveCompleteRow = rows.some(function (col) {
return col.every(function (cell) {
return cell.text.length > 0;
});
});
}, true);
}]);
with:
<body ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="row in rows">
<td data-ng-repeat="cell in row">
<input ng-model="cell.text" type="text" />
</td>
</tr>
</tbody>
</table>
<div ng-show="haveCompleteRow">we have a complete row!</div>
</body>
as the template.
Demo: http://jsbin.com/URaconiX/2/