Develop Reference

Hide specific row of a table

I have this simple table:
<v-simple-table>
<template v-slot:default class="my-20 py-20">
<thead>
<tr>
<th class="text-left">Attribute</th>
<th class="text-left">Operator</th>
<th class="text-left">Values</th>
</tr>
</thead>
<tbody>
<tr v-for="(ruleDetail, j) in ruleDetails">
<td>{{ ruleDetail.attribute_name }}</td>
<td>{{ ruleDetail.operator_name }}</td>
<td>{{ ruleDetail.value }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
I would like to hide the row where
ruleDetail.attribute_name == Label batch
What is the best practice to do that?
//all from API
//this.ruleDetails = response.data.details
//tried to filter, but it's not working.
this.ruleDetails = response.data.campaigns.filter((item) => {
return item.attribute_name != 'Label batch'
})

Try to use includes in filter in computed property :
computed: {
filteredRules() {
return this.ruleDetails.filter((item) => !item.attribute_name.toLowerCase().includes(('Label batch').toLowerCase())
}
}
and then in templae:
<tr v-for="(ruleDetail, j) in filteredRules">

Your code is perfect and it should work. One suggestion, cross check response.data.campaigns to see if you are getting the proper response in this or not.
Working Demo as per the code you posted :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
campaigns: [
{
attribute_name: 'UV Index (Current Weather)',
operator_name: 'Lesser number',
value: 7
},
{
attribute_name: 'Temperature (Current Weather)',
operator_name: 'Greater or equal number',
value: 17
},
{
attribute_name: 'Label batch',
operator_name: 'Equal numbers',
value: 66235
}
],
ruleDetails: []
}
},
mounted() {
this.ruleDetails = this.campaigns.filter((item) => {
return item.attribute_name != 'Label batch'
})
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Attribute</th>
<th class="text-left">Operator</th>
<th class="text-left">Values</th>
</tr>
</thead>
<tbody>
<tr v-for="(ruleDetail, j) in ruleDetails">
<td>{{ ruleDetail.attribute_name }}</td>
<td>{{ ruleDetail.operator_name }}</td>
<td>{{ ruleDetail.value }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-app>
</div>

How to do pagination for angular table?

I am trying to do pagination for scope object in angularjs,for that am using jquery data table plugin.
But am getting Cannot read property 'insertBefore' of null error,Table datas are also not displaying.
What is the meaning for this error?Is anything wrong in my code?
var app= angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.details=[
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
}
]
$scope.init = function(){
$('#myData').dataTable();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table id="myData">
<thead>
<td>S.no</td>
<td>Name</td>
<td>Age</td>
</thead>
<tbody>
<tr ng-repeat="data in details">
<td>{{$index+1}}</td>
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</tbody>
</table>
</div>
Can anybody let me know what am wrong?Please correct me if am wrong.Thanks!!:-)

for perform jquery object in controller you can create an directive in this way
but for pagination in table you can download angular-table and add angular-table module to your app.and then use angular table in bellow way
angular table in your view :
<table id="myData" at-config="config" at-table at-list="details">
<tbody>
<tr >
<td at-implicit at-title='S.no'>{{$index+1}}</td>
<td at-implicit at-attribute="name" at-title='Name'></td>
<td at-implicit at-attribute="age" at-title='Age'></td>
</tr>
</tbody>
</table>
<at-pagination at-config="config" at-list="details"></at-pagination>
add config in your controller:
$scope.config = {
itemsPerPage: 10,
maxPages: 5,
currentPage: 0,
orderBy: 0,
fillLastPage: false
};
you can also use pagination directive for your purpose

AngularJS search using filter not working

I am trying to search using angularjs filter method but its not working. I am not getting any errors in the console but still the search result is not showing up. Can someone help me on this.
This is my controller.js code:
.controller('SearchController',
[
'$scope',
'dataService',
'$location',
'$routeParams',
function ($scope, dataService, $location, $routeParams){
$scope.searchMovies = [ ];
$scope.searchCount = 0;
var getSearchResult = function (terms) {
dataService.getSearchResult(terms).then(
function (response) {
$scope.searchCount = response.rowCount + ' movies';
$scope.searchMovies = response.data;
$scope.showSuccessMessage = true;
$scope.successMessage = "All movie Success";
},
function (err){
$scope.status = 'Unable to load data ' + err;
}
); // end of getStudents().then
};
if ($routeParams && $routeParams.term) {
console.log($routeParams.term);
getSearchResult($routeParams.term);
}
}
]
);
This is the services.js code:
this.getSearchResult = function (terms) {
var defer = $q.defer(),
data = {
action: 'search',
term: terms
}
$http.get(urlBase, {params: data, cache: true}).
success(function(response){
defer.resolve({
data: response.ResultSet.Result,
rowCount: response.RowCount
});
}).
error(function(err){
defer.reject(err);
});
return defer.promise;
};
This is my app.js code:
. when('/search', {
templateUrl : 'js/partials/search.html',
controller : 'SearchController'
}).
This is the search.html code:
<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searchMovies | filter:searchMovie">
<td>
{{search.title}}
</td>
<td>
{{search.description}}
</td>
<td>
{{search.name}}
</td>
</tr>
</tbody>
</table>
The search data is being retrieved from the database. I have tested the SQL and it works fine. Just thee problem is in the angularjs server side. Thank you.

You need to give Alias for controller in your app.js file
.when('/search', {
templateUrl : 'js/partials/search.html',
controller : 'SearchController'
controllerAs: 'movies',
});
Now After This in your search.html file pass controllerAs
<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searchMovies | filter:searchMovie">
<td>
{{movies.search.title}}
</td>
<td>
{{movies.search.description}}
</td>
<td>
{{movies.search.name}}
</td>
</tr>
</tbody>

Angularjs : 3 nested ng-repeat table representation

I have nested ng-repeats like below :
<table class="table table-striped table-bordered" border=1>
<tbody ng-repeat="list in globalList">
<tr ng-repeat="child in list">
<td ng-repeat="baby in child">
{{baby.second}}
</td>
</tr>
</tbody>
</table>
What I'd like to have is a table as header the baby.title property and as data baby.second
Something that looks like to this :
|baby.title | baby.title | ... | ->HEADERS
--------------------------------
|baby.second| baby.second| ... |
|baby.second| baby.second| ... |
|baby.second| baby.second| ... | ->DATAS
My data structure in picture :
I don't know if that's possible with my data structure tho and I can hardly change it.
Any advices ?

UPDATE: Check this code. I added new variable in JS $scope.longestArray
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.globalList = [
[
[{
'second': "dataAA",
'title': "titleA"
}, {
'second': "dataAB",
'title': "titleA"
}]
],
[
[{
'second': "dataBA",
'title': "titleB"
}, {
'second': "dataBB",
'title': "titleB"
}, {
'second': "dataBC",
'title': "titleB"
}]
],
[
[{
'second': "dataCA",
'title': "titleC"
}]
]
];
$scope.longestArray = angular.copy($scope.globalList).sort(function(a, b) {
return b[0].length - a[0].length;
})[0][0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table>
<thead>
<tr>
<th ng-repeat="list in globalList">
{{list[0][0].title}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="baby in longestArray">
<td ng-repeat="list in globalList">
{{list[0][longestArray.indexOf(baby)].second}}
</td>
</tr>
</tbody>
</table>
</body>
Plunker

Highlight a row if it contains a specific item with Angularjs

I want to highlight the row of a table if this table contains an element that is in a global variable.
Here is a fiddle : http://jsfiddle.net/L60L3gv9/
So
var myVar = "SWITZERLAND"
is the global variable I'm looking in the table.
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
And if the table contains it, I want to highlight the row.
Any advices ?

Here is a possible solution:
HTML:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th> {{myVar}}
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td ng-class="{ 'red-background' : x.Country==myVar }">{{ x.Country | uppercase }}</td>
</tr>
</table>
CSS:
.red-background {
background-color: red;
}
JS:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.myVar = "Switzerland"
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {
$scope.names = response.data.records;
});
});
Note that the server returns countries in lowercase.
Here is a jsfiddle

First, define a class which highlight the row:
tr.highlight {
background-color:#123456;
}
Then you should define a constant and inject it into the controller:
var myVar = "SWITZERLAND" // highlight the row where SWITZERLAND is
var app = angular.module('myApp', []);
app
.constant('myVar', myVar)
.controller('customersCtrl', function($filter, $scope, $http, myVar) {
$scope.myVar = myVar;
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.names = response.data.records.map(function(item) {
item.Country = $filter('uppercase')(item.Country);
return item;
});
});
});
Last, use the directive ng-class in the view:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names" ng-class="{'highlight' : x.Country === myVar}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>

<tr>
<th>Sr. No.</th>
<th>Menu Name</th>
<th>Child Menu</th>
</tr>
<tr ng-repeat="menus in menuList" >
<td >{{$index+1}}</td>
<td >{{menus.menu}}</td>
<td ng-if="menus.menu_items"><span class="text-left logo-dashboard">
<a ui-sref="configureChildMenuState" title="Cilk me"><span class="glyphicon glyphicon-option-horizontal"></span></a>
</td>
<td ng-if="!menus.menu_items"></td>
</tr>
</tbody>
I have understand clearly u r question ,if any row have any any child data or rows need to highlight image or any one.
Here i used image by using boostrap
This is working perfectly check once