Develop Reference

Use search bar to filter data in data table based on search string

I am trying to apply a filter in a data table from input received from a search bar. I have an input field in header of my application. On entering a value in that search bar, I need the page to get redirected to 'http://localhost:1001/#/employees' page and the filtering should be applied.
Header html:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" ng-controller="getUserHeader">
<div class="container">
<form class="navbar-search pull-right" ng-submit="applySearch()">
<input id="input-search" class="search-query" name="mysearch" ng-model="mysearch" placeholder="Search">
</form>
</div>
</div>
</div>
</div>
Header controller :
myApp.controller('getUserHeader', ['$scope', 'commonServices', 'dataTable', '$rootScope', '$location', '$filter', function ($scope, commonServices, dataTable, $rootScope, $location, $filter) {
commonServices.getReservations().then(function (result) {
$scope.data = result.data;
$scope.applySearch = function () {
alert($scope.mysearch);
}
});
}]);
I want to pass the mysearch value to the filter on data table contained in the partial view 'http://localhost:1001/#/employees'. The HTML code and controller code of that page is,
HTML :
<div class="row">
<div class="span12">
<div class="widget widget-table action-table">
<div class="widget-header"> <i class="icon-th-list"></i>
<h3>Employee</h3>
</div>
<div class="widget-content table-container" ng-controller="getEmployeesController" >
<table ng-table="employeesList" show-filter="true" class="table table-striped table-bordered">
<tr ng-repeat="employee in $data">
<td data-title="'#'">
{{ (itemsPerPage * (pageNumber-1)) + $index+1 }}
</td>
<td data-title="'First Name'" sortable="'firstName'" filter="{ 'firstName': 'text' }">
{{employee.firstName}}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
The filtering works fine from within this page.
Controller :
myApp.controller('getEmployeesController', ['$scope', 'employeeServices', 'dataTable', '$window', '$timeout', '$filter', function ($scope, employeeServices, dataTable, $window, $timeout, $filter) {
employeeServices.getEmployees().then(function (result) {
$scope.data = result.data;
});
Data Table is configured in App.js file :
myApp.factory('dataTable', ['$filter', 'ngTableParams', function($filter, ngTableParams) {
var factoryDefinition = {
render: function($scope, config, componentId, data) {
if(!config) config ={};
var config = angular.extend({}, {page:1, count:10}, config)
$scope[componentId] = new ngTableParams(config, {
total: data.length, // length of data
getData: function ($defer, params) {
// organize filter as $filter understand it (graph object)
var filters = {};
angular.forEach(params.filter(), function (val, key) {
var filter = filters;
var parts = key.split('.');
for (var i = 0; i < parts.length; i++) {
if (i != parts.length - 1) {
filter[parts[i]] = {};
filter = filter[parts[i]];
}
else {
filter[parts[i]] = val;
}
}
});
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, filters) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
$scope.pageNumber = params.page();
$scope.itemsPerPage = params.count();
}
});
}
}
return factoryDefinition;
}
]);
So basically I have different controllers in both the header and in the partial view. I want to enter a string on search bar in header and on enter click, it should redirect to the partial view and apply the filter on the data table contained inside.
How am I supposed to achieve this? Sadly I was not able to create a plunker for this.
This is how the values are passed to App.js file while a filter is applied from within the partial view (https://i.imgsafe.org/595e6265b7.jpg). I added this so that you can see how the custom data table works.
Thanks in advance.

Angular Nested Controller in ng-repeat

I'm trying to use a nested controller in an ng-repeat so that the accordion panels on the page operate in different scopes (there may be a better way to do this). The problem is that the code in the nested controller never gets executed. I put a "debugger" stop point at the top and it never gets hit.
Here is my HTML:
<script src="~/Scripts/app/LWS/LWSCtrl.js"></script>
<script src="~/Scripts/app/LWS/lwsService.js"></script>
<script src="~/Scripts/app/Common/commonCtrl.js"></script>
<script src="~/Scripts/app/Common/commonService.js"></script>
<div ng-app-="myModule" ng-controller="LWSCtrl">
<div cg-busy="waitopr"></div>
<tabset>
<tab heading="Dashboard">
<div ng-repeat="m in majors">
<div ng-controller="commonCtrl">
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open">
<accordion-heading>
<div style="height:20px">
<span class="pull-left">{{m.MajorName}}</span><i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': status.open, 'glyphicon-chevron-down': !status.open}"></i>
</div>
</accordion-heading>
...(shortened for brevity)
Here is the nested controller in its entirety:
angular.module('myModule').controller('commonCtrl', function ($scope, commonService, $, $timeout, $filter, $interval, $window) {
debugger;
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: false,
isFirstDisabled: false
};
getDashboard();
function getDashboard() {
$scope.waitopr = commonService.getlwsdashboard()
.success(function (data) {
$scope.dashboard = data;
var arr = {};
for (var i = 0, len = $scope.dashboard.length; i < len; i++) {
arr[$scope.dashboard[i]['CompanyID']] = $scope.dashboard[i];
};
$scope.majors = new Array();
for (var key in arr) {
$scope.majors.push(arr[key]);
}
angular.forEach($scope.majors, function (value, key) {
for (var i = 0; i < $scope.dashboard.length; i++) {
if (value.CompanyID == $scope.dashboard[i].CompanyID) {
$scope.majors[key].header = $scope.dashboard[i];
};
}
})
angular.forEach($scope.majors, function (value, key) {
$scope.waitopr = commonService.getlegend(value.CompanyID)
.success(function (data) {
$scope.majors[key].Legend = data;
for (var i = 0; i < $scope.dashboard.length; i++) {
if (value.CompanyID == $scope.dashboard[i].CompanyID) {
$scope.majors[key].MajorName = $scope.dashboard[i].MajorName;
};
}
});//end success
});//end forEach
angular.forEach($scope.majors, function (value, key) {
for (var i = 0; i < $scope.dashboard.length; i++) {
if (value.CompanyID == $scope.dashboard[i].CompanyID) {
items.push($scope.dashboard[i]);
};
}
$scope.majors[key].items = items;
items = [];
})
});//end success
};
})
I don't understand why the nested controller code is not executing. Any assistance is greatly appreciated!

Your controller is attached to an element within an ng-repeat. If the item you're repeating on is empty/undefined, your controller instance will never be invoked.
You must ensure that majors is populated and non-empty in the parent $scope.

Angular - Fill dropdown based on selection

HTML
<div class="col-xs-2 type-image" ng-repeat='group in groups'>
<a class="thumbnail" ng-click='selectItem(group)'>
<img src="<% group.image %>" class="img-responsive">
</a>
</div>
<div class="col-md-5 type-description" ng-bind-html="selectedItem.description | unsafe"></div>
<div class="col-md-6 no-gutter">
<select ng-options="gurte.id for gurte in group.gurte"></select>
</div>
app.js
app.controller('gurtController', function($scope, $http) {
$scope.groups = [];
$scope.loading = false;
$scope.init = function() {
$scope.loading = true;
$http.get('/api/groups').
success(function(data, status, headers, config) {
$scope.groups = data;
$scope.loading = false;
});
}
$scope.selectItem = function(item) {
$scope.selectedItem = item;
}
$scope.init();
});
How can I fill the select dropdown based on the selection in the upper block of the HTML? Am I right, that the scope is still on "group" when I have selected it in the top or do I have to pass "group" to the select field somehow?
If needed I can provide the output from the API too. basically its:
Group
-id
-name
-gurte (relationship) ->
- id
- spalten (many to many; ) ->
- id
- name (this needs to go to the dropdown)
-> pivot -> spalten_value

How to pass AngularJS expressions to controller

I want to pass AngularJS Expression value to the controller.
HTML code :
<div data-ng-controller="AlbumCtrl">
<div data-ng-repeat="z in songInfo">
<div data-ng-repeat="b in z.album">
{{b.tracks}}
</div>
</div>
<!-- Pagination -->
<div class="pageing">
<a class="prev" data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1">prev</a>
<a class="pageingg" href="#/song">{{currentPage+1}}/{{numberOfPages()}}</a>
<a class="next" data-ng-disabled="currentPage >= data.length/pageSize - 1" data-ng-click="currentPage=currentPage+1">next</a>
</div>
</div>
Here {{b.tracks}} is the count of total number of tracks in the album. I have to pass this data to the controller AlbumCtrl.
Controller :
.controller('AlbumCtrl', function($scope, $routeParams, $http) {
$scope.album_id = $routeParams.albumId;
$http.post('api-call.php', { albumid: $scope.album_id, evt: 13 }).success(function(data) {
$scope.songInfo = data;
});
//Pagination
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
};
for (var i=0; i<AngularJS expression value; i++) {
$scope.data.push("Item "+i);
}
});
Here, in controller AngularJS expression value is the value we have to get here.

if it have only one value. then you can easily get the values from controller, you don't need to pass it.
try this way $scope.songInfo[0].album[0].tracks
Something like
for (var i=0; i< $scope.songInfo[0].album[0].tracks; i++) {
$scope.data.push("Item "+i);
}

Try this two line,
var obj = JSON.parse($scope.songInfo);
var track = obj.root.tracks[0];

Angular JS - Binding view and app.js - ng-repeat doesn't work

I've created a ASP.NET MVC 4 project by using Angular JS. I wouldn't be able to create a JSFiddle for this example of code.
I notice that I retrieve well the categories and it prints well. Then, when I click on one of the categories represented by a tag '<a>', my code goes to $scope.setActualItem of my app.js and the ajax call retrieves the right datas. But the changes are not printed in my view. However, I use "<div ng-repeat="p in products">" to get datas from the controller.
Do you have a solution ?
Thank you
app.js :
var appli = angular.module("Demo", []);
appli.controller('CategoryCtrl', function ($scope, $http) {
$http.get('/Category/GetCategories')
.success(
function (data) {
console.log(data);
$scope.categories = data;
}
);
$scope.setActualItem = function (index) {
$scope.currentItem = $scope.categories[index];
var idCat = $scope.currentItem.id;
console.log("passe ici");
$http.get('/Category/GetProductsByCategory/'+idCat)
.success(
function (data) {
console.log(data);
$scope.products = data;
}
);
};
});
My View :
<html ng-app="Demo">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="~/Scripts/app.js"></script>
</head>
<body ng-controller="CategoryCtrl">
#Html.Partial("~/Views/Header/Index.cshtml")
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-6">
<div class="no-padding">
<span class="title" style="padding-top: 20px;">CATEGORIES</span>
</div>
<a class ="list-group-item" ng-click="setActualItem($index)" ng-repeat="cat in categories">{{cat.name}}</a>
</div>
</div>
<div id="ProductListcategory">
ggfgfgfgfgf
<div ng-repeat="p in products">
<label>{{p.id}}</label>
<label>{{p.name}}</label>
</div>
</div>
</body>
</html>

Use angular.copy and define $scope.products on begining
var appli = angular.module("Demo", []);
appli.controller('CategoryCtrl', function ($scope, $http) {
$scope.products = [];
$http.get('/Category/GetCategories')
.success(
function (data) {
console.log(data);
$scope.categories = data;
}
);
$scope.setActualItem = function (index) {
$scope.currentItem = $scope.categories[index];
var idCat = $scope.currentItem.id;
console.log("passe ici");
$http.get('/Category/GetProductsByCategory/'+idCat)
.success(
function (data) {
console.log(data);
angular.copy(data,$scope.products);
//or angular.copy(data.data, $scope.products);
}
);
};
});