如何使用angularjs引导电网用李和UL标签

问题描述：

<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>如何使用angularjs引导电网用李和UL标签

帮助他人重现问题并非所有的问题，从包括代码中获益。但是，如果你的问题是你写的代码，你应该包括一些。但不要只复制你的整个程序！如果您发布雇主的代码，这不仅会让您陷入麻烦，而且可能会包含许多不相关的细节，读者在尝试重现问题时将忽略这些细节。以下是一些准则：只包含足够的代码以允许其他人重现问题。有关此方面的帮助，请阅读如何创建最小，完整和可验证 – Prasad

示例。如果可以创建一个可以链接到的问题的实例（例如http://sqlfiddle.com/或http://jsbin.com/），那么可以这样做 - 但也包括代码在你的问题本身。不是每个人都可以访问外部网站，并且这些链接可能会随着时间而中断 – Prasad

好！当然！我是新来的，我很新鲜。感谢您的建议 – Rajesh

答

试试这个：

<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>

Thanku janani。但我想用在网格bootstrap中。如何使用？四列.Col-md-3为什么不在这里申请？ – Rajesh

@Rajesh是的，我已经使用Grid。查看使用的类“行col-md-3”。检查响应。有用。 – janani

是啊谢谢！ – Rajesh

如何使用angularjs引导电网用李和UL标签

相关推荐