使用控制器中定义的范围进行过滤

时间:2016-01-30 03:29:17

标签: javascript angularjs json

我正在使用角度js开发一个网页。我想在网站上添加一些过滤器,

这是我的HTML代码

<div ng-repeat="data in datas | filter:{area:course} | filter:{subject:subFilter} | filter:{city:cityFilter}">
                        <h5><span class="text-warning">#</span>&nbsp;{{data.intrest}}</h5>
                        <div class="row">
                            <div class="col-xs-3">
                                <h5 class="text-info">Name</h5>
                                <p>{{data.name}}</p>
                            </div>
                            <div class="col-xs-3">
                                <h5 class="text-info">Subject</h5>
                                <p>{{data.subject}}</p>
                            </div>
                            <div class="col-xs-3">
                              <h5 class="text-info">Address</h5>
                                <p>{{data.city}}, {{data.state}}</p>
                            </div>
                            <div class="col-xs-3">
                                <a href="#/view"><button class="btn btn-warning" style="margin-top:10px;">View</button></a>
                            </div>
                        </div>
                        <hr>
                    </div> 

这是我的控制器文件

app.controller('mainController',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
$http.get('assets/newtab.json').success(function(data){
    $scope.department=data;
    $scope.whichItem=$routeParams.itemId;
    $scope.course=$scope.department[$scope.whichItem].course;
});
$http.get('assets/engineering.json').success(function(data){
    $scope.datas=data;
    $scope.whichItem=$routeParams.itemId;
    $scope.optItem=[
        {title:"Random",value:" "},
        {title:"Question Paper Setting",value:"Question Paper Setting"},
        {title:"Question Paper Passing Board",value:"Question Paper Passing Board"},
        {title:"Question Paper Post Auditing",value:"Question Paper Post Auditing"},
        {title:"Question Paper Evaluation",value:"Question Paper Evaluation"},
        {title:"Member for board of study",value:"Member for board of study"},
        {title:"Member for academic council",value:"Member for academic council"},
        {title:"Result passing board",value:"Result passing board"},
        {title:"Invigilation",value:"Invigilation"},
        {title:"Door Valuation",value:"Door Valuation"},
        {title:"Exam squad",value:"Exam squad"}
    ];
});
}]);

这里是来自engineering.json和newtab.json的片段

enginering.json

[{"id":"1","name":"Sam","dob":"","age":"21","gender":"","department":"16\/03\/1995","area":"Nuclear Medicine Technology Course","institution":"Park College of Technology ","city":"Tiruppur","state":"Tamil Nadu","intrest":"Question paper evaluation","mobile":"","email":"jaya5292.jmj@gmail.com","password":"jaya","subject":"Computer Networks"},{"id":"2","name":"jaya","dob":"","age":"21","gender":"","department":"16\/03\/1995","area":"Nuclear Medicine Technology Course","institution":"Park College of Technology ","city":"","state":"","intrest":"","mobile":"","email":"jaya5292.jmj@gmail.com","password":"jaya","subject":""},{"id":"3","name":"jaya","dob":"","age":"21","gender":"","department":"16\/03\/1995","area":"Nuclear Medicine Technology Course","institution":"Park College of Technology ","city":"","state":"","intrest":"","mobile":"","email":"jaya5292.jmj@gmail.com","password":"jjjj","subject":""}]

newtab.json

[{"Department":"Arts","course":"B.A. English"}, {"Department":"Arts","course":"B.A. English (Computer Applications)"}, {"Department":"Arts","course":"B.A. Economics"}, {"Department":"Arts","course":"B.A. History"}, {"Department":"Arts","course":"B.A. Political Science"}, {"Department":"Arts","course":" B.A. Tamil  "}, {"Department":"Arts","course":"B.Lit. Tamil  "}]

在第5行的控制器中我已经获取了点击项目的值并将其存储在名为&#34; course&#34;的变量中,我必须能够使用此&来过滤我的html中的结果#34;当然&#34 ;.我在我的html文件中写了一个语法。但它没有过滤正确的结果

1 个答案:

答案 0 :(得分:0)

从我看到的情况来看,数据的.area属性(enginering.json)与newtab的.course属性不重叠。对于每个engineering.json,该区域都是&#34;核医学技术课程&#34;,所以无论你从newtab选择哪个部门,都没有匹配。

Working Fiddle here。在这个小提琴中,我已经改为Sam的.area以显示过滤器的工作原理(为了简单起见,删除了额外的过滤器,尽管它们应该可以正常工作)。

但另一个可能的问题是从$ http返回的数据通常以

的形式访问
$http.get(url).then(function(result) {
    $scope.variable = result.data;
}

因为从$ http调用返回的对象具有.data属性中的数据。这也是值得关注的事情。

编辑:正如下面@mzulch指出的那样,你的$ http语法对于低于1.5的角度版本是正确的