How to use bootstrap grid in angularjs using li and ul tag

Question

<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 Verifiable — Prasad, Mar 08 '16 at 05:10
example. If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://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, Mar 08 '16 at 05:11
ok! Sure! I am new to this and i am very fresher.Thanku for your suggestions — Rajesh, Mar 08 '16 at 05:14

score 0 · Accepted Answer · answered Mar 08 '16 at 05:27

0

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">&nbsp;&nbsp;{{ x.name }} </li>
    </ul>
  <body>
</html>

answered Mar 08 '16 at 05:27

janani

123
1
2
14

Thanku janani. But i want to use those in grid bootstrap. How to use? Four columns.Col-md-3 is not applying here why? – Rajesh Mar 08 '16 at 05:38
@Rajesh Yes, I have used Grid. See the classes `row col-md-3` used. Check responsive. It works. – janani Mar 08 '16 at 05:43
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 Mar 08 '16 at 05:47
http://www.profileevaluator.com/List-Of-Universities . The format in this link is is what i needed.Any suggessions? – Rajesh Mar 08 '16 at 05:59
http://www.profileevaluator.com/List-Of-Universities . I want this format of diaplaying data. Anyone suggest the code please. – Rajesh Mar 08 '16 at 06:18
Which thing you need? The Menus? "Home, About Us, Contact Us" – janani Mar 08 '16 at 07:00
The universities list which is displayed in grid format – Rajesh Mar 08 '16 at 07:01
for me it looks like this, There are errors: https://www.dropbox.com/s/cyl8nuoqnpiw94n/Desktop%20screenshot.png?dl=0 – janani Mar 08 '16 at 07:05
I did not try but it seems to be closer. But how to get rid of those lines? – Rajesh Mar 08 '16 at 07:25

How to use bootstrap grid in angularjs using li and ul tag

1 Answers1