如何在 angularjs 中使用 li 和 ul 标签的引导网格

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

本文关键字：标签 ul 网格 li angularjs      更新时间：2023-09-26

<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"> &nbsp;&nbsp;<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>

试试这个：

<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>
相关文章：