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>
Related
How can I highlight the previously selected value in a dropdown of type multiple in AngularJS?
I want to highlight val: 1, 2 in my dropdown. Scope variable Fruits contains a JSON array of Id, Name and val contains the set of Ids that need to be highlighted.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label>Multiple</label>
<select ng-model="val" ng-options="x as x.Id for x in Fruits" multiple>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Fruits = [
{
Id: 1,
Name: 'Apple'
},
{
Id: 2,
Name: 'Mango'
},
{
Id: 3,
Name: 'Orange'
}
];
$scope.val = [1,2];
});
</script>
</body>
</html>
Try this one. use track by in the select statement, also if you need to multi select the options, you have to set the array of those objects in the ng-model value instead of the individual ids
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label>Multiple</label>
<select ng-model="val" ng-options="x as x.Id for x in Fruits track by x.Id" multiple>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.Fruits = [{Id: 1,Name: 'Apple'},
{Id: 2,Name: 'Mango'},
{Id: 3,Name: 'Orange'}];
$scope.val = [{Id: 1,Name: 'Apple'},
{Id: 2,Name: 'Mango'}];
});
</script>
</body>
</html>
with:
<select ng-model="val" ng-options="x.Id as x.Name for x in Fruits" multiple>
</select>
It should work
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label>With Name: </label>
<select ng-model="val" ng-options="x.Id as x.Name for x in Fruits" multiple>
</select>
<label>With ID: </label>
<select ng-model="val" ng-options="x.Id as x.Id for x in Fruits" multiple>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Fruits = [
{
Id: 1,
Name: 'Apple'
},
{
Id: 2,
Name: 'Mango'
},
{
Id: 3,
Name: 'Orange'
}
];
$scope.val = [1,2];
});
</script>
</body>
</html>
I have an simple html code and i put an object using ng-init and displayed that details using ng-repeat its all work fine, and i add a controller after that it seems some error
my html code is
<html ng-app>
..
<body>
<div ng-controller="MyFirstController">
<div ng-repeat="album in albums | filter:searchFor | orderBy:date " >
...
</div>
...
</div>
<script type="text/javascript">
function MyFirstController($scope){
$scope.albums =[
{ name: 'abc', title: 'Weekend' }];
}
</script>
</body>
Error is showing like this
[ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=AlbumListController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
I solved this problem as i added angular.module but i want to know that is there any other solution for this i somebody know please help me......
<html ng-app="myapp">
..
<body>
<div ng-controller="MyFirstController">
<div ng-repeat="album in albums | filter:searchFor | orderBy:date " >
...
</div>
...
</div>
<script type="text/javascript">
var app = angular.module("myapp");
app.controller('MyFirstController', function MyFirstController($scope){
$scope.albums =[{ name: 'abc', title: 'Weekend' }];
});
</script>
</body>
This can help you
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.albums =[{ name: 'abc', title: 'Weekend' },{ name: 'abcd', title: 'Weekend' }];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="album in albums | filter:searchFor | orderBy:date " >
{{album.name +" "+ album.title}}
</div>
</div>
Try this:-
Controller
var myApp = angular.module("myApp")
.controller('MyFirstController', function ($scope) {
// write your business logic here
$scope.albums =[{
name: 'abc',
title: 'Weekend'
}];
})
HTML
<html ng-app="myApp">
<body>
<div ng-controller="MyFirstController">
<div ng-repeat="album in albums | filter:searchFor | orderBy:date " >
</div>
</div>
</body>
If you are using ng-controller, ng-app or other directives, controllers then it is must to write module.
module is a container act for controllers, directives, services, etc
so if you want to add or Inject these then use that container angulr.module.
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'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>
I am learning Angularjs. I have started with http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
Most of the tutorial examples worked fined until I dashed into the following code:
<html>
<head>
</head>
<body data-ng-app=''>
<div data-ng-controller="simpleController" >
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
<script src='angular.min.js'></script>
<script>
function simpleController($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
</script>
</div>
</body>
</html>
You are using a controller with out creating a module. You have to create a module before handling the controller.
In older versions of Angular JS(<1.3) you can create a controller with out a module. But in later versions it is not possible.
Please have a look at the below code
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"> </script>
</head>
<body data-ng-app='myapp'>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="x in names">{{ x.name}}</li>
</ul>
</div>
<script>
var app = angular.module('myapp', [])
app.controller('simpleController', function($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
});
</script>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
</head>
<body ng-app='myapp'>
<ul ng-controller='simpleController'>
<li ng-repeat='x in names'>{{x}}</li>
</ul>
<script>
function simpleController($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
}
simpleController.$inject = ['$scope'];
angular.module('myapp', []).controller('simpleController', simpleController)
</script>
You problem is you are using Angular 1.3+
Your code will work with Lower Version of angular (lesser than 1.3), because you are using global function declaration, & the global function declaration is disabled by default in angular 1.3.
If you want to get your code Working you need to enable global controller function declaration while initializing angular.
Config
app.config($controllerProvider) {
// Don't do this unless you *have* to
$controllerProvider.allowGlobals();
});
But this is not good practice to use global functions, you should us modular approach as angular do use it separate out code. Then do mention you module name in you ng-app directive like ng-app="app"
Code
angular.module('app', [])
.controller('simpleController',simpleController)
function simpleController($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
}
HTML
<body data-ng-app=''>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
</body>
The better way to do is creating controllers.js for controller
<html ng-app='myapp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div data-ng-controller="simpleController" >
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
</body>
</html>
The logic in controllers.js should be with module:
var app = angular.module('myapp', [])
app.controller('simpleController', function($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
});