I'd like to supply a filter value via a variable. What is wrong with the ng-repeat line below where I attempted to include the model reference {{fil}}?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : {{fil}}">
{{ x }}
</li>
</ul>
<p>This example displays only the names containing the letter {{ fil }}.</p>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.fil = "a";
});
</script>
</body>
</html>
You should pass it without interpolation{{}}, so it will apply filter fil which is there in scope.
<li ng-repeat="x in names | filter : fil">
{{ x }}
</li>
Related
The title may be a bit confusing. Please take a look at the code below,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | filter:test"> {{ x }}</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
</body>
</html>
with these codes i can search for a name from scope.names. But the problem is, i don't want to hide other results while searching for a particular name. Which means, when i search "Gustav", it should be on top of the list without hiding other names. It would be more great if names were sorted by the matching of supplied keyword. Please help in this.
OrderBy is one of the options for the desired effect:
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | orderBy:customOrdering"> {{ x }}</div>
{{ log }}
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.test = "";
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.customOrdering = function(a) {
return a.indexOf($scope.test) == -1;
//return a.toUpperCase().indexOf($scope.test.toUpperCase()) == -1;
// use that for case insensitive search
}
});
</script>
</body>
</html>
I need to merge and display in a single row for particular data which has same id. I'm using ng-repeat for displaying data.
Sample JSON:
$scope.sampleTest = [{"city": "Chennai", "name":"Sample"},
{"city": "Madurai", "name":"Test"}, {"city": "Chennai", "name":"Testing"}]
I'm using uibaccordion for grouping data.
Expected Output:
*Chennai
Sample, Testing
*Madurai
Test
I'll get dynamic json data. Can anyone help me in this.
You can group by city name using filter,
<body ng-controller="myCtrl">
<div ng-repeat="(key, value) in sampleTest | groupBy: '[city]'">
<div ng-repeat="player in value">
{{key}} {{ player.name }}
</div>
</div>
</body>
DEMO
var app = angular.module('sampleApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
$scope.sampleTest = [{"city": "Chennai", "name":"Sample"},
{"city": "Madurai", "name":"Test"}, {"city": "Chennai", "name":"Testing"}];
});
<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="(key, value) in sampleTest | groupBy: '[city]'">
<div ng-repeat="player in value">
{{key}} {{ player.name }}
</div>
</div>
</body>
</html>
Instead of doing <div ng-repeat="(key, value) in sampleTest"> ... </div>, you can do <div ng-repeat="(key, value) in merge(sampleTest)"> ... </div> if you define a function merge to transform the sampleTest object.
function merge(toMerge) {
var merged = {};
for (k in toMerge) {
if (k in merged) {
merged[k] += toMerge[k];
} else {
merged[k] = toMerge[k];
}
}
return merged;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a.{{replace}}">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d:[1,2,3,4,5],
f:[6,7,8,9]
};
$scope.call = function(val) {
$scope.replace='val';
}
});
</script>
</body>
</html>
I'm trying to add dynamically the values to ng-repeat content, but it's not working, please do help
can we add dynamically values to ng-repeat itself so we can change the iterating values every time by simply changing one value like above, if not is there any better ideas
The following snippet can help you.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a[replace]">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope) {
$scope.a = {
d: [1, 2, 3, 4, 5],
f: [6, 7, 8, 9]
}
$scope.call = function (val) {
$scope.replace = val;
}
});
</script>
</body>
</html>
Explanation :
$scope.replace=val; //Assign the variable and not a string
<li ng-repeat="x in a[replace]"> // No need to use braces are you are in an ng tag already
Instead of passing strings you can pass the values in the call function then assign those values to $scope.replace which then update your ng-repeat
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call(a.d)">for d</button>
<button ng-click="call(a.f)">for f</button>
<ul>
<li ng-repeat="x in replace">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d: [1,2,3,4,5],
f: [6,7,8,9]
}
$scope.call = function(val){
$scope.replace=val;}
}
);
</script>
</body>
</html>
I'm trying to output the name "Sam" on the screen in a ng-show using indexOf, but nothing ever appears. Any help is appreciated.
html
<head></head>
<body>
<div ng-controller="ArrayController">
<div ng-repeat="product in products">
<div ng-show="product.name.indexOf('Sam') == 2">
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular
var app = angular.module('myApp', []);
app.controller('ArrayController', ['$scope', function($scope){
$scope.products = [
{
name: 'Joe'
},
{
name: 'Bill'
},
{
name: 'Sam'
}
];
}]);
Possible solution using ng-if instead of ng-show
<body ng-app="myApp">
<div ng-controller="ArrayController">
<div ng-repeat="product in products">
<div ng-if="product.name.indexOf('Sam') > -1">{{product.name}}
</div>
</div>
</div>
</body>
var app = angular.module('myApp', []);
app.controller('ArrayController', ['$scope', function($scope){
$scope.products = [
{
name: 'Joe'
},
{
name: 'Bill'
},
{
name: 'Sam'
}
];
}]);
<div ng-show="product.name.indexOf('Sam') == 2"></div>
This will show the div if product.name contains the string "Sam" starting at its third character (i.e. "xxSam"). That probably isn't what you want.
The div is empty, so will not be visible to the user even if the ng-show is truthy. That, too, is probably not what you want.
I'm pretty sure what you do want is this:
<div>{{product.name}}</div>
I have been using AngularJS for some time now and this particular code block is not difficult by any means, but it's not working and there must be something extremely simple that I am missing here:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
As of now, this code produces a blank page. There should be an unordered list with four records and for example, typing 'Bob' in the input box should filter the records down to the only one that contains the name 'Bob'.
This demo was already working when the AngularJS code was inline and there was no controller. I had used ngInit in order to supply the customer array. When I attempted to place the customers in their own controller, I started receive a blank page.
I'm sure I just need a second pair of eyes to look over this very simple example.
Thanks for any help you may be able to provide.
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
angular.module('app', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
Multiple things you could change in the demo.
You should create a new angular module
var module = angular.module(name, [dependencies])
That module should be bootstrapped using ng-app
ng-app="nameOfApp"
Controller should be added to the defined module
module.controller('SimpleController', SimpleController);
EDIT: Same outcome without specifying a module
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>