Well i've got 2 lists:
$scope.list = [{val: 1, name:'01'},{val: 2, name:'02'},{val: 3, name:'03'},{val: 4, name:'04'}]
$scope.selectedList = [{val: 2, name:'02'},{val: 4, name:'04'}]
and a list of comboboxes - generated by the list:
<div ng-repeat="item in list| filter: query">
<input type="checkbox" ng-change="change(isDisabled,{{item.val}})" ng-model="isDisabled" /> {{item.name}}
</div>
So how can I attach the selectedList to the checkboxes?
You need to add a ng-checked to the check box. Using a function as the expression, sending in the item that represents that check box.
ng-checked="isChecked(item)"
then the function just needs to return whether that item is in the selectedList
$scope.isChecked = function(item){
return $scope.selectedList.indexOf(item) >-1;
};
Related
I am fetching some records which are already assigned to users with checked checkboxes. I want to assign some additional ones that are coming as unchecked checkboxes. How can I show checked checkboxes first and then show whatever is unchecked after them?
You can use angular filters to show checked checkboxes first and whatever is unchecked, show it after them
try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [
{id: 1, value: 1},
{id: 2, value: 0},
{id: 3, value: 1},
{id: 4, value: 0},
{id: 5, value: 0}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>Checked</h2>
<div ng-repeat="item in data | filter : { value : 1}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
<h2>Unchecked</h2>
<div ng-repeat="item in data | filter : { value : 0}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
</div>
</div>
Hope it helps..
Hi I am adding Dynamically form fields like this
<div ng-repeat="exam_student in exam_students">
<select
ng-model="exam_student.student_id"
options="students"
ng-options="student.id as student.name for student in students">
</select>
<button type="button" ng-click="removeStudent($index)">-</button>
</div>
<button type="button" ng-click="addStudent()">Add Student</button>
js
$scope.students = [{id: 1, name: 'st1'},
{id: 2, name: 'st2'}];
$scope.exam_students = [{}];
$scope.addStudent = function(){
$scope.exam_students.push({});
}
$scope.removeStudent = function(index){
$scope.exam_students.splice(index,1);
}
Each time a user clicks on Add Student button the form field added but how do i disable the previous selected option in a select element.
Thank you for your any help and suggestions
didn't fully test or optimize it, but this is something you can do.
add track by $index in ng-repeat and add ng-disabled in the select tag with
<div ng-controller='MyController'>
<div ng-repeat="exam_student in exam_students track by $index">
<select
ng-model="exam_student.student_id"
options="students"
ng-options="student.id as student.name for student in students"
ng-disabled="exam_students.length > 1 && exam_students.length > $index + 1">
</select>
<button type="button" ng-click="removeStudent($index)">-</button>
</div>
<button type="button" ng-click="addStudent()">Add Student</button>
</div>
https://jsfiddle.net/4xfzmuub/
exam_students.length > 1 is to prevent the first field from being disabled
===========================================================================
updated answer. Instead of using select with ng-options, I chose to use select with ng-repeat option. This was what I tried and not working.
ng-options="student.id as student.name disable when student.disable for student in students"
The options were able to be disabled. Unfortunately Angular won't let me set the value to ng-model since the option has been disabled. A workaround is to use select with ng-repeat option
html:
<div ng-controller='MyController'>
<div ng-repeat="exam_student in exam_students track by $index">
<select ng-model="exam_student.student_id" ng-change="hasChange()">
<option ng-repeat="student in students" value={{::student.id}} ng-disabled="student.disable">{{::student.name}}</option>
</select>
<button type="button" ng-click="removeStudent($index)">-</button>
</div>
<button type="button" ng-click="addStudent()">Add Student</button>
</div>
js:
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
// I suggest adding an empty object so that we can re-select the options
$scope.students = [{},{id: 1, name: 'st1', disable: false},
{id: 2, name: 'st2', disable: false},
{id: 3, name: 'st3', disable: false}];
$scope.exam_students = [{}];
$scope.addStudent = function(){
$scope.exam_students.push({});
}
$scope.removeStudent = function(index){
$scope.exam_students.splice(index,1);
$scope.hasChange();
}
$scope.hasChange = function() {
// using a lookup table, instead of 2 nested loops, for a better performance when the list gets large
var lookupTable = {};
// store the student_id in the lookupTable and set it to true
// worth noting since I am using option tag, student_id will be stored as string instead of number, but it is ok because key in javascript object will be converted to string
$scope.exam_students.forEach(function(exam_student) {
lookupTable[exam_student.student_id] = true;
// or lookupTable[Number(exam_student.student_id)] = true;
});
// loop through the options and if student_id is true/there, set disable accordingly
$scope.students.forEach(function(student) {
if(lookupTable[student.id]) {
student.disable = true;
}else {
student.disable = false;
}
//or student.disable = lookupTable[student.id];
});
}
}
https://jsfiddle.net/apop98jt/
I have a list of options as an enum:
var Options = {
Option0: 0,
Option1: 1,
Option2: 2,
Option3: 3,
Option4: 4
};
And a sub-list of available options:
var availabledOptions = [
Options.Option0,
Options.Option2,
Options.Option4
];
I then try to show the list of available options as radio inputs but it doesn't work and I'm wondering why. $scope.selectedOption is not updated.
function main($scope) {
$scope.availabledOptions = availabledOptions;
$scope.selectedOption = Options.Option2;
}
</script>
<div ng-app ng-controller="main">
<ul>
<li ng-repeat="option in availabledOptions">
<input name="options" type="radio" ng-model="selectedOption" ng-value="option">option #{{option}}
</li>
</ul>
selected option: option #{{selectedOption}}
</div>
http://jsfiddle.net/1xgsqL67/
I tried ng-repeat="option in availabledOptions track by $index" and also without the name attribute, but it still doesn't work.
Thanks in advance!
Try the following:
ng-model="$parent.selectedOption"
My understanding is that ng-repeat creates it's own scope, and you have to go up one level.
I have a view where a filter is being used filter: test_id.It is working absolutely fine.What I want to do is if the search filter does not return any data can I call a function in the controller at that instant of time when the filter returns null or no data in the list is shown as per search.
<input type="text" id="test_id" ng-model="test_id" value=""/>
<div class="test_list">
<ul>
<p> testID :{{test_id}}</p>-->
<li ng-repeat="test in test_list | filter: test_id">
{{test}}
</li>
</ul>
</div>
Try this.
In your controller
$scope.filteredData = $scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // dummy data
$scope.applyFilter = function () {
$scope.filteredData = $scope.$eval('data | filter: filterWith');
if (!$scope.filteredData || !$scope.filteredData.length) {
// no-data.
// do your stuff.
}
}
In your markup
<input type="text" ng-model="filterWith" ng-change="applyFilter()">
<div data-ng-repeat="item in filteredData" >
{{item}}
</div>
I'm building a CRUD and I want to some model to be linked to others. So on some update/create template I need to add some other model and save their id when submitting the form.
So I did a basic form that is served by my backend. Here is the part where I try to display the linked model:
<div ng-repeat="item in otherItems">
<select ng-model="item" name="item" >
<option value="1" ng-selected="item">
<option value="2" ng-selected="item">
<option value="3" ng-selected="item">
</select>
<a class="remove" ng-click="removeRelated(item)">remove</a>
</div>
<a ng-click="addRelated()"><i class="icon-plus"></i></a>
Note: otherItems could be empty at the beginning (when doing a create or when an item is not linked to any other related model's item).
So when one press add/remove it will trigger a controller's function:
$scope.addRelated = function (){
if (typeof $scope[otherItems]=="undefined")
$scope[otherItems] = new Array();
$scope[otherItems].push($scope[otherItems].length);
};
$scope.removeRelated = function (item){
console.debug(item);
var idx = $scope[otherItems].indexOf(item);
if (idx !== -1) {
$scope[otherItems].splice(idx, 1);
}
};
My problem is when I save I get the position of item in items (so it's always 0, 1, 2...) I won't have an array of selected ID.
I guess there is something wrong with my addRelated maybe. What am I doing wrong?
Here is a screenshot to understand the idea since I may not be very clear:
So something like this? http://plnkr.co/edit/6eqWL5
The markup..
<body ng-controller="MainCtrl">
<div ng-repeat="otherItem in otherItems">
<select ng-model="otherItem.selectedItem" ng-options="item for item in otherItem.items"></select>
<a ng-click="removeOtherItem($index)">remove</a>
</div>
<a ng-click="addOtherItem()">add</a>
<hr/>
Selected:
<ul>
<li ng-repeat="otherItem in otherItems">
otherItem[{{$index}}].selectedItem = {{otherItem.selectedItem}}
</li>
</ul>
</body>
The code
app.controller('MainCtrl', function($scope) {
$scope.otherItems = [
{
selectedItem: null,
items: [1, 2, 3]
},
{
selectedItem: null,
items: [4, 5, 6]
}
];
$scope.addOtherItem = function(){
$scope.otherItems.push({ items: [7, 8, 9]});
};
$scope.removeOtherItem = function(index) {
$scope.otherItems.splice(index, 1);
};
});
Sorry if it's off from what you're asking for... the question was a little vague, so I'm guessing at some of the functionality.