我想要表演"经验水平列表"在col - lg - 3中并更新col - lg - 8中的数据

时间:2015-12-15 05:52:22

标签: angularjs twitter-bootstrap

我想要表演"经验水平列表"在col-lg-3中更新col-lg -8中的数据 - 当col-lg-8中的用户选择复选框时,应该在col-lg-8上显示更新数据。我试过代码请帮帮我。          

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js">
</script>
<script src="https://code.angularjs.org/1.5.0-beta.0/angular-route.min.js">     </script>
</head>

<body>

<div ng-app="demo">
<div class="container">
<div class="col-lg-3">

</div>
<div class="col-lg-9">
<div ng-controller="myCtrl">
 <b>Experience Level:</b>
 <div ng-repeat="cat in getCategories()">
 <b><input type="checkbox" ng-model="filter[cat]" /> {{cat}}</b>
 </div>
 <hr /> Your Search Results: {{filtered.length}}
 <br>
 <br>
 <div class="row">
 <div class="col-lg-12" ng-repeat="w in filtered=(experience | filter:filterByCategory)">
 {{w.name}}
 <hr />
 </div>
 </div>
 <div>
 </div>
 </div>
 </div>
 <script>
 var app = angular.module('demo', ['ngRoute']);
 app.controller('myCtrl', function($scope, $http) {
 $scope.experience = [{
 name: "Java developer",
 category: "Entry Level ($)"
 }, {
 name: "Mean-Stack developer",
 category: "Entry Level ($)"
 }, {
 name: "Java developer",
 category: "Entry Level ($)"
 }, {
 name: "web developer",
 category: "Entry Level ($)"
 }, {
 name: "java developer",
 category: "Intermediate ($$)"
 }, {
 name: "Mean-Stack developer",
 category: "Intermediate ($$)"
 }, {
 name: ".net developer",
 category: "Intermediate ($$)"
 }, {
 name: "WCF developer",
 category: "Expert ($$$)"
 }, {
 name: "Spring developer",
 category: "Expert ($$$)"
 }, {
 name: "UI/UX ",
 category: "Entry Level ($)"
 }
 ];
 $scope.filter = {};
 $scope.getCategories = function() {
 return ($scope.experience || []).map(function(w) {
 return w.category;
 }).filter(function(w, idx, arr) {
 return arr.indexOf(w) === idx;
 });
 };
 $scope.filterByCategory = function(experience) {
 return $scope.filter[experience.category] || noFilter($scope.filter);
 };
 function noFilter(filterObj) {
 for (var key in filterObj) {
 if (filterObj[key]) {
 return false;
 }
 }
 return true;
 }
 });
 </script>

 </body>

 </html>

1 个答案:

答案 0 :(得分:1)

尝试此代码并告诉我它是否适合您..

>df

#x y
#a 1
#b 1
#a 2
#c 1
#b 2