I am in process of building a "User Skill Search Application" in AngularJS.
The concept is simple we have users with different skills. We want to build an application where we can see easily see if we have a user with say X and Y skills.
I have skills as checkboxes and user as list.
Now, I am stuck on how to filter the list based on selected skills.
Please see it should be an AND operation i.e. user should possess all the skills selected in checkbox.
Please see http://ift.tt/2arPCxM
angular.module("myApp", [])
.controller("TreeController", ['$scope', function ($scope) {
$scope.users = [
{ "name": "User1", "skill": ['DotNet','ASP.Net'] },
{ "name": "User2", "skill": ['DotNet','Oracle'] },
{ "name": "User3", "skill": ['Microsoft'] },
{ "name": "User4", "skill": ['ASP.Net'] },
{ "name": "User5", "skill": ['Oracle DBA','ASP.Net'] }
];
$scope.nodeSearch = function (treeNodes, searchID) {
for (var nodeIdx = 0; nodeIdx <= treeNodes.length - 1; nodeIdx++) {
var currentNode = treeNodes[nodeIdx];
if (currentNode.sys_id == searchID) {
return currentNode;
} else {
var foundDescendant = $scope.nodeSearch(currentNode.children, searchID);
if (foundDescendant) {
return foundDescendant;
}
}
}
return false;
};
$scope.setData = function (data) {
var elements = [];
if (data.chk === true && data.parent !== null) {
elements.push($scope.nodeSearch($scope.tree, data.parent));
} else if (data.chk === false) {
angular.forEach(data.children, function (child, key) {
elements.push($scope.nodeSearch(data.children, child.sys_id));
});
}
angular.forEach(elements, function (element, key) {
element.chk = data.chk;
$scope.setData(element);
});
};
$scope.getAllActive = function () {
var data = [
{ "name": "Oracle DBA", "parent": "2", "sys_id": "2.1" },
{ "name": "Microsoft", "parent": "", "sys_id": "1" },
{ "name": "Oracle", "parent": "", "sys_id": "2" },
{ "name": "ASP.Net", "parent": "1.1", "sys_id": "1.1.1" },
{ "name": "DotNet", "parent": "1", "sys_id": "1.1" }
];
var dataMap = data.reduce(function(map, node) {
map[node.sys_id] = node;
return map;
}, {});
// create the tree array
var tree = [];
data.forEach(function(node) {
// add to parent
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to child array
.push(node);
if(!("children" in node))
{
node.children=[];
}
} else {
// parent is null or missing
if(!("children" in node))
{
node.children=[];
}
tree.push(node);
}
});
$scope.tree = JSON.parse(JSON.stringify(tree, null, ' '));
};
function initTree(tree) {
function processNode(node) {
angular.forEach(node.children, function(child) {
if(processNode(child) === true) {
node.chk = true;
}
});
return node.chk;
}
angular.forEach(tree, processNode);
};
initTree($scope.tree);
}]);
ul {
list-style: circle;
}
li {
margin-left: 20px;
}
<script src="http://ift.tt/1Mrw6cj"></script>
<body ng-app="myApp" ng-controller="TreeController" data-ng-init="getAllActive()">
<div style="float:left; width: 20%">
<script type="text/ng-template" id="tree_item_renderer.html">
<input type="checkbox" ng-model="data.chk" ng-change="setData(data)">
<ul>
<li ng-repeat = "data in data.children" ng-include= "'tree_item_renderer.html'"></li>
</ul>
</script>
<ul>
<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>
</div>
<div ng-repeat="user in users" style="float:right; width: 80%">
<header><h3></h3></header>
<ul ng-repeat="skl in user.skill">
<li></li>
</ul>
</div>
</body>
Please feel free to modify the code :).
Aucun commentaire:
Enregistrer un commentaire