Javascript 使用控制器中定义的作用域进行ng筛选_Javascript_Angularjs_Json

Javascript 使用控制器中定义的作用域进行ng筛选

javascript angularjs json

Javascript 使用控制器中定义的作用域进行ng筛选,javascript,angularjs,json,Javascript,Angularjs,Json,我正在使用AngularJS开发一个网页。我想在网站上添加一些过滤器这是我的HTML代码 <div ng-repeat="data in datas | filter:{area:course} | filter:{subject:subFilter} | filter:{city:cityFilter}"> <h5><span class="text-warning">#</span>&n

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

这是我的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>

下面是engineering.json和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  "}]

engineering.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行的控制器中，我已获取单击项的值并将其存储在名为“课程”的变量中，我必须能够使用此“课程”在html中过滤结果。我在html文件中编写了一个语法。但是它没有从我看到的结果中筛选出正确的结果，数据的.area属性（engineering.json）没有与newtab的.course属性重叠。对于engineering.json，每个领域都是“核医学技术课程”，所以无论你从newtab选择哪个部门，都不会有对手

。在这篇文章中，我改为Sam的.area以显示过滤器的工作原理（为了简单起见，我删除了额外的过滤器，尽管它们应该可以正常工作）

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

$http.get(url).then(function(result) {
    $scope.variable = result.data;
}

因为从$http调用返回的对象具有.data属性中的数据。所以这也是值得一看的

编辑：正如下面@mzulch所指出的，您的$http语法对于1.5以下的angular版本是正确的

据我所见，数据的.area属性（engineering.json）与newtab的.course属性没有重叠。对于engineering.json，每个领域都是“核医学技术课程”，所以无论你从newtab选择哪个部门，都不会有对手

。在这篇文章中，我改为Sam的.area以显示过滤器的工作原理（为了简单起见，我删除了额外的过滤器，尽管它们应该可以正常工作）

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

$http.get(url).then(function(result) {
    $scope.variable = result.data;
}

因为从$http调用返回的对象具有.data属性中的数据。所以这也是值得一看的

EDIT:正如@mzulch在下面指出的那样，您的$http语法对于angular 1.5以下的版本是正确的

从angular 1.5开始，它似乎已被弃用，但

$http

支持

成功

承诺方法作为

然后

的替代方法，并且回调作为参数

数据、状态、标头接收，配置

而不是单个的

响应

@mzulch，非常好。谢谢你提醒我们！我的错误。答案更新了这把小提琴似乎帮不了我！有其他解决方案吗？@Sam，你能提供更多信息吗？什么不起作用？我的小提琴坏了吗？你得到了什么结果？你想得到什么？你懂小提琴吗？如果没有，你不明白哪一部分？你能自己制作一把小提琴来显示问题吗？或者给我足够的信息来创建一个可能有用的小提琴？看，如果你在过滤器之外的其他地方添加{{course}，它会返回正确的值，也就是说，如果我点击B.e Computer science，它会返回B.e Computer science，如果我点击B.Sc。泰米尔语返回理学学士学位。泰米尔语，现在如果我在过滤器中添加相同的{{course}}，它不会返回正确的值，即使我单击不同的链接，它也会返回我首先返回的链接，即单击B.e泰米尔语，它仍然会返回B.e.计算机科学。从1.5开始，它似乎已被弃用，但是

$http

支持

success

promise方法作为

then

的替代方法，并且回调作为参数

接收数据、状态、头、配置

，而不是单个

响应