如何使用 li 和 ul 标签在 angularjs 中使用引导网格
[英]How to use bootstrap grid in angularjs using li and ul tag
问题描述
\n\n
<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>
1 个解决方案
解决方案1
0 已采纳 2016-03-08 05:27:24
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.