On the page fiddle I have a grid.
In $scope.myItems I have my data.
I want observe the data. After I type in the name field "Enos", I want to get only records which contain that string ("Enos").
The grid works, but I want to print the data using console log, because after filtering data I want to pass the data to another function.
I tried use $scope.watch but it's not working.
.module('myApp', ['trNgGrid'])
.controller("MainCtrl", ["$scope", function ($scope) {
$scope.myItems = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 99}];
$scope.$watch('myItems', function(newValue) {
console.log(newValue); });
}]);
When I type sth to field console log isn't working.
Answer can be found from documentation http://moonstorm.github.io/trNgGrid/release/#/GlobalOptions
<table tr-ng-grid items="myItems" filtered-items="myFilteredItems"></table>
$scope.myFilteredItems = [];
$scope.$watchCollection('myFilteredItems', function(items){
console.log(angular.toJson(items));
});
Related
I have this string var string = "{name: Hello, age: 20}, {name: Nadia, age: 30}" returned from the backend. I created an object out of it by appending it to an empty array like so:
var array = [];
var array1 = array.push(string);
After appending to an array, I got the following result:
Array [
"{name: Hello, age: 20},
{name: Nadia, age: 30}
{name: Nadia, age: 30}
{name: Nadia, age: 30}
{name: Nadia, age: 30}"
]
My intended result is this:
Array [
"{name: Hello, age: 20}",
"{name: Nadia, age: 30}",
"{name: Nadia, age: 30}",
"{name: Nadia, age: 30}",
"{name: Nadia, age: 30}"
]
I have tried using split(",") but they're separated individually instead. How can I achieve the intended result? I'm very new to this.
UPDATE: The answer provided gave out not quite the result that I wanted. I have this larger set of objects. The solution returns me with 2 objects, with the second object being a combination of objects. Here's the output using the method in the answer:
Array [
"{name: Hello, age: 20}",
"{name: Nadia, age: 30}
{name: Nadia, age: 30}
{name: Nadia, age: 30}
{name: Nadia, age: 30}"
]
Also, I have asked my fellow backend dev to fix the json return, sadly they cannot change it. I'm not sure why. The only way I can handle this is on frontend.
Below method works but its a bit crude. But you can give it a try..
let str = "{name: Hello, age: 20}, {name: Nadia, age: 30}, {name: Nadia, age: 30}, {name: Nadia, age: 30}";
let x = str.replaceAll('}, ', '}/').split('/');
console.log(x);
If I have multiple data sources for multiple ng-grid (not ui-grid), how would I assign them to each ng-grid configs?
ex:
$scope.myData['set1'] = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.myData['set2'] = [{name: "Moroni", age: 50}];
I want to do something along the lines of:
var gridOptions1 = {
data: ('myData[' + 'set1' + ']'),
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true,
selectedItems: $scope.selected
};
var gridOptions2 = {
data: ('myData[' + 'set2' + ']'),
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false,
selectedItems: $scope.selected
};
The reason I want to do this is because I have a dynamic form which may have a variable amount of ng-grids (based on useer input), so I need to make sure each grid has to correct data within it.
I think I figured out my error. set1 and set2 are supposed to be surrounded by double quotes within the single quotes.
I was trying this ngTable example of filtering columns using select values.
HTML code (table part)
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
Javascript code
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.names = ['Moroni', 'Enos', 'Nephi'];
$scope.tableParams = new NgTableParams({page: 1, count: 10}, {dataset: data});
})
When I run this code plunker, the select values for column 'Name' are blank.
The example says
The select filter will fetch its data by calling the fetchData function defined for the column.
But, there is no fetchData function called in the code in that example. I am confused as what is the issue here?
From example I figured out that the format used by ng-table for filter-data attribute in HTML(for select values) is array of objects in the following form.
$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
Updated plunker.
Should be written like:
$scope.names = [{"id": "", "title": ""}, {"id": "Moroni", "title": "Moroni"}];
I am trying to implement the example shown in the official ng-table homepage here as is.
So I copied and pasted to my project and it fails to show any data like below:
My HTML code is a partial html, loaded with ngRouter:
<section class="content">
<h2>TABLE</h2>
<div ng-controller="TableCtrl">
<p><strong>page:</strong>{{tableParams.page()}}</p>
<p><strong>count per page:</strong>{{tabelParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr tr-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
</section>
My JS file is:
var app = angular.module('pean', ['ngRoute', 'ngTable'])
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'partials/home'
}).
when('/test', {
templateUrl: 'partials/test',
controller:'TableCtrl'
}).
Url: 'partials/read'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
app.controller('TableCtrl', function($scope, ngTableParams){
var data = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.tableParams = new ngTableParams({
page:1,
count:10
},{
total:data.length,
getData:function($defer, params){
$defer.resolve(data.slice((params.page() -1) * params.count(), params.page() * params.count()));
}
});
});
There isn't any error message on my chrome consol. So I don't see any reason why this is not working.
you are having tr-repeat="user in $data"instead of
ng-repeat="user in $data"
in your code.
try to add your data as
$scope.data = [...]
instead of
var data = [...]
in your controller and refer it as
ng-repeat="user in data"
in your HTML
Hope this helps!
I'm Using ng-grid to populate the Data. I'm using the ng-grid internal filter. But its not what i want.
Data is
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
If I search "Moroni" I'm getting the output i needed. But If i search "roni" ( Moroni ) I should not see Moroni name. My question is how can i apply the strict comparison of the key value.
I want the filter should be true only when
filterText == 'Moroni' [ exactly matching the text instead substring ]
In the angular docs for filter: http://docs.angularjs.org/api/ng.filter:filter
You find this under comparator:
true: A shorthand for function(actual, expected) { return angular.equals(expected, actual)}.
this is essentially strict comparison of expected and actual.
So try filter:filterText:true