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>
Related
I don't know syntax filter or search with md-virtual-repeat, help me, thank you very much!!!
<input type="text" ng-model="searchId"> <!-- old: model="searchId" -->
<md-virtual-repeat-container>
<div md-virtual-repeat="i in items | filter:{searchId}">
<div>{{i.id}}</div>
<div>{{i.name}}</div>
</div>
</md-virtual-repeat-container>
iteams array object in Javascript, I'm done!
Note: You need to change model to ng-model & then need to change {searchId} to searchId.
I have created a simple demo for you. please look at it.
'use strict';
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.items = [{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Steve'
},
{
id: 3,
name: 'Joey'
},
{
id: 4,
name: 'Mary'
},
{
id: 5,
name: 'Marylin'
}
];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type="text" ng-model="searchId">
<table>
<tbody>
<tr ng-repeat="item in items | filter:
searchId">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
You have to remove {} in filter
<input type="text" model="searchId">
<md-virtual-repeat-container>
<div md-virtual-repeat="i in items | filter:searchId">
<div>{{i.id}}</div>
<div>{{i.name}}</div>
</div>
</md-virtual-repeat-container>
I have a collection, and I am looping over it.
<tbody>
<tr ng-repeat="account in vm.pagedAccounts.items"
ng-class="{ 'highlight': (account.rowIsSelected === account) }"
<td>
<input
ng-model="account.rowIsSelected"
ng-value="{{account}}"
name="selectedAccount"
ng-change="vm.selectAccount(account)"
type="radio">
</td>
ng-value is set to the entire account object.
Now, the row is being highlighted but the button is not checked.
In controller,
vm.selectAccount = function (account) {
account.rowIsSelected = account;
}
What am I doing wrong?
I think this is what you are looking for. Instead of using ng-change its more commong to use a seperate selected model.
View
<div ng-controller="MyCtrl as vm">
<table>
<tbody>
<tr ng-repeat="account in vm.items"
ng-class="{ 'highlight': account === vm.selected }">
<td>
Input:
<input ng-model="vm.selected"
ng-value="account"
name="selectedAccount"
ng-click="vm.resetOthers(account)"
type="radio">
</td>
</tr>
</tbody>
</table>
</div>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
let vm = this;
vm.selected = null;
vm.items = [{
rowIsSelected: false
}, {
rowIsSelected: false
}, {
rowIsSelected: false
}];
});
> demo fiddle
If you want to radio button get checked, you should set ng-value as true, you can't bind entire complex object it should be boolean.
<input
ng-value="account.rowIsSelected"
name="selectedAccount"
ng-change="vm.selectAccount(account)"
type="radio">
I have a table, each row has a checkbox, name, another checkbox, and dropdown. I want to have the dropdown disabled by default, and only enable it when check the first checkbox.
Here's the HTML:
<tbody>
<tr v-for="item in Items" v-bind:id="item.ID">
<td>
<!-- check this checkbox and enable/disable the dropdown -->
<input type="checkbox" v-on:click="onSelect($event)" v-model="item.Selected" />
</td>
<td>
{{ item.Name }}
</td>
<td>
<input type="checkbox" v-model="item.isActive" /><
<td>
<!-- enabled/disabled depending on if checkbox is checked -->
<select v-bind:disabled="">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
</td>
</tr>
</tbody>
Currently, the onSelect($event) method will check the second checkbox in the same row when checked.
Here's my JavaScript:
var vm = new Vue({
el: '#app',
data: {
items: items
},
methods: {
onSelect: function (event, id) {
setTimeout(function () {
var idx = $(event.target).closest('tr').index();
if (items[idx].Selected) {
items[idx].isActive = true;
}
}, 100);
}
}
});
Is there a way to bind the enabling/disabling of the dropdown to a checkbox with VueJS 2/JavaScript/jQuery?
You don't actually need to use jQuery or events for this, rather you can simply use Vue's data binding for this. Simply set v-model="item.Selected" on the first checkbox, and then on the select, set v-bind:disabled="!item.Selected".
HTML:
<!-- index.html -->
<div id="app">
<table>
<tbody>
<tr v-for="item in items">
<td>
<!-- check this checkbox and enable/disable the dropdown -->
<input type="checkbox" v-model="item.Selected"/>
</td>
<td>
{{ item.Name }}
</td>
<td>
<!-- enabled/disabled depending on if checkbox is checked -->
<select v-bind:disabled="!item.Selected">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript:
// app.js
const vm = new Vue({
el: '#app',
data() {
return {
items: [
{ ID: 1, Name: 'name 1', isAcitve: false, Selected: false },
{ ID: 2, Name: 'name 2', isAcitve: false, Selected: false },
{ ID: 3, Name: 'name 3', isAcitve: false, Selected: false },
]
}
},
})
I've attached a pen which displays this.
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
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.