问我希望在col 3中显示“经验级别列表”，并在col 8中更新数据。
EN

Stack Overflow用户

提问于 2015-12-15 05:52:22

回答 1查看 56关注 0票数 1

我想要显示“体验水平列表”在col 3和更新数据在col 8更新的输出应该显示在col 8当用户选择复选框从col 3.我已经尝试了代码，请帮助我。

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

angularjs

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-15 06:56:21

试试这段代码，让我知道它是否适合你。

<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 ng-controller="myCtrl">

    <div class="container">
<div class="col-lg-3">
    <b>Experience Level:</b>
    <div ng-repeat="cat in getCategories()">
        <b><input type="checkbox" ng-model="filter[cat]" /> {{cat}}</b>
    </div>
</div>
<div class="col-lg-8">

 <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>
</div>
</div>
</div>
 </body>

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


</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34282016

复制

相似问题

问我希望在col 3中显示“经验级别列表”，并在col 8中更新数据。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我希望在col 3中显示“经验级别列表”，并在col 8中更新数据。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我希望在col 3中显示“经验级别列表”，并在col 8中更新数据。
EN