Array.prototype.removeElement = function(elem) {
if (this.length === 0) {
return;
}
var index = this.indexOf(elem);
if (index != -1) {
this.removeAt(index);
}
}
Array.prototype.removeAt = function(index) {
if (this[index])
this.splice(index, 1);
}
function Course() {
return {
lookup_course_id: 0,
course_fee: 0,
experience: 0
};
}
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.addCourse = function() {
$scope._courseList.push(new Course());
}
$scope.removeCourse = function(course) {
$scope._courseList.removeElement(course);
}
$scope._filters = {};
// This filter/predicate will invoked when select renders the options for each item in categories ...
// If all course of the categerory has been selected
// then the options can be displayed. Else the option can be displayed to selected ....
$scope._filters.selectableCategories = function(selectedCategoryId) {
return function(item) {
// 1. get the selected courses whose :
// 1.1 course id is set/ NOT NULL... hence we ignore the courses that the user has not yet selected the course ...
// 1.2 categerory == item
// 1.3 categerory is not the current select category ... bcos the current selected category IS ALWAYS SELECTABLE ...
//2. If the above count NOT EQUAL the course in category, then is selectable ...
return $scope._courseList
.filter(function(elm) { return elm._courseId && elm._categoryId !== selectedCategoryId && elm._categoryId === item.id;})
.length != $scope._courses[item.id].length;
}
}
// This filter/predicate will invoked when select renders the options for each item in courses_of_category ...
// If the option has is not in the selected courses
// then the options can be displayed. Else the option can be displayed to selected ....
$scope._filters.selectableCourses = function(selectedCategoryId, selectedCourseId) {
return function(item) {
// 1. get all the select courses :
// 1.1 category === selected categerory
// 1.2 course is not the selected course ... again bcos the current selected course IS ALWAYS SELECTABLE ...
// 2. get the array of courseIds ...
// 3. If item's id IS NOT IN the array, then item IS SELECTABLE ...
return $scope._courseList
.filter(function(elm) {return elm._categoryId == selectedCategoryId && elm._courseId !== selectedCourseId;})
.map(function(elm){ return elm._courseId; })
.indexOf(item.id) < 0;
}
}
$scope._courseList = [];
$scope._categories = [
{id: 1, name: 'Elementary School'},
{id: 3, name: 'University'},
{id: 4, name: 'Preparation'},
{id: 6, name: 'Computer'}];
$scope._courses = {};
$scope._courses[$scope._categories[0].id] = [
{id: 15, name: 'Bilgisayar'},
{id: 16, name: 'Bilgi Teknolojisi'},
{id: 33, name: 'Vatandaslik'},
{id: 34, name: 'Yabanci Dil'}];
$scope._courses[$scope._categories[1].id] = [
{id: 73, name: 'Astroloji'},
{id: 74, name: 'Astronomi'},
{id: 111, name: 'Meteoroloji Müh' },
{id: 112, name: 'Yabanci Dil'},
{id: 120, name: 'Psikoloji'}];
$scope._courses[$scope._categories[2].id] = [
{id: 175, name: 'TIPDIL' },
{id: 176, name: 'TODAIE'},
{id: 178, name: 'TOEFL'}];
$scope._courses[$scope._categories[3].id] = [
{id: 263, name: 'ASP'},
{id: 268, name: 'C'},
{id: 269, name: 'C#'}];
});
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<table class="table table-hover table-responsive">
<tr>
<th>Course Category</th>
<th>Course</th>
<th>Price
<span class="text-muted">($)</span>
</th>
<th>Experience
<span class="text-muted">(Year)</span>
</th>
<th>Operation</th>
</tr>
<tr ng-repeat="course in _courseList">
<td>
<select class="form-control"
ng-model="course._categoryId"
ng-options="opt.id as opt.name for opt in (_categories | filter:_filters.selectableCategories(course._categoryId))">
<option value="">Select Category</option>
</select>
</td>
<td>
<select class="form-control"
ng-readonly="!course._categoryId"
ng-model="course._courseId"
ng-options="opt.id as opt.name for opt in (_courses[course._categoryId] | filter:_filters.selectableCourses(course._categoryId, course._courseId))">
<option value="">Select Course</option>
</select>
</td>
<td>
<input type="text" class="form-control" placeholder="Ücret Giriniz" ng-model="course.course_fee"/>
</td>
<td>
<input type="text" class="form-control" placeholder="Tecrübe Giriniz" ng-model="course.experience"/>
</td>
<td>
<a href="" ng-click="removeCourse(course)">Delete</a>
</td>
</tr>
<tr>
<td colspan="5">
<a href="" ng-click="addCourse()"> Add New Course </a>
</td>
</tr>
</table>
<hr/>
<h3>Course List</h3>
<pre>{{_courseList | json}}</pre>
</body>
</html>
Populating tailing select options with remaining possibilities .....
------------------------------------------------------------------------
Resolved "Cihad Turhan's angular.js sets model to null when ng-options filtered"
@Stackoverflow http://stackoverflow.com/questions/33371177/angular-js-sets-model-to-null-when-ng-options-filtered
@fb https://www.facebook.com/groups/AngularJS2/permalink/704174586349293/