<script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Carl',country:'Sweden'}, {name:'Margareth',country:'England'}, {name:'Hege',country:'Norway'}, {name:'Joe',country:'Denmark'}, {name:'Gustav',country:'Sweden'}, {name:'Birgit',country:'Denmark'}, {name:'Mary',country:'England'}, {name:'Kai',country:'Norway'} ]; }); </script> </head> <body ng-app="myApp" ng-controller="namesCtrl"> <br><br> <div class="container"> <input type="text" size="40" placeholder="search by universities or states" ng-model="test"> </div> <br><br><br> <div class="container" ng-repeat="x in names | orderBy:'name'"> <div class="row"> <br> <div class="col-sm-3" ng-repeat="x in names | orderBy:'country'|filter:test"> {{ x.name }} </div> <br> </div> </div>
-
Help others reproduce the problem Not all questions benefit from including code. But if your problem is with code you've written, you should include some. But don't just copy in your entire program! Not only is this likely to get you in trouble if you're posting your employer's code, it likely includes a lot of irrelevant details that readers will need to ignore when trying to reproduce the problem. Here are some guidelines: Include just enough code to allow others to reproduce the problem. For help with this, read How to create a Minimal, Complete, and VerifiablePrasad– Prasad2016-03-08 05:10:57 +00:00Commented Mar 8, 2016 at 5:10
-
example. If it is possible to create a live example of the problem that you can link to (for example, on sqlfiddle.com or jsbin.com) then do so - but also include the code in your question itself. Not everyone can access external sites, and the links may break over time.Prasad– Prasad2016-03-08 05:11:00 +00:00Commented Mar 8, 2016 at 5:11
-
ok! Sure! I am new to this and i am very fresher.Thanku for your suggestionsRajesh– Rajesh2016-03-08 05:14:15 +00:00Commented Mar 8, 2016 at 5:14
Add a comment
|
1 Answer
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></style>
<script>
angular.module('myApp', [])
.controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'}
, {name:'Carl',country:'Sweden'}
, {name:'Margareth',country:'England'}
, {name:'Hege',country:'Norway'}
, {name:'Joe',country:'Denmark'}
, {name:'Gustav',country:'Sweden'}
, {name:'Birgit',country:'Denmark'}
, {name:'Mary',country:'England'}
, {name:'Kai',country:'Norway'}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="namesCtrl">
<div class="container">
<input type="text" size="40" placeholder="search by universities or states" ng-model="test">
</div>
<ul class="container row" style="list-style: none;margin: 0px;padding: 0px;width: 100%;">
<li class="col-md-3" style="float: left;" ng-repeat="x in names | orderBy:'country'|filter:test"> {{ x.name }} </li>
</ul>
<body>
</html>
9 Comments
Rajesh
Thanku janani. But i want to use those in grid bootstrap. How to use? Four columns.Col-md-3 is not applying here why?
janani
@Rajesh Yes, I have used Grid. See the classes
row col-md-3 used. Check responsive. It works.Rajesh
This is how my data looks. Can you suggest for this to display in the grid. WYOMING Has 1 Universities University Of Wyoming Laramie.
Rajesh
profileevaluator.com/List-Of-Universities . The format in this link is is what i needed.Any suggessions?
Rajesh
profileevaluator.com/List-Of-Universities . I want this format of diaplaying data. Anyone suggest the code please.
|