angularjs:尝试获取过滤数据时$filter未定义

2024-01-13

自从几天以来,我一直在尝试让它运行:通过以下代码片段,我想过滤一些人,并在 onchange 被触发后接收已过滤的对象。在这里查看此代码:http://jsbin.com/isojof/1/ http://jsbin.com/isojof/1/

任何想法?

还没有 $filter 对象...但是如何创建一个呢? $filter('filter') 显然不起作用!

<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

</head>


<body ng-controller="List">

    Search: <input ng-change="getData(names, query)" ng-model="query">
    Search: <select ng-change="getData(names, query2)" ng-model="query2">
    <option></option>
    <option>Berlin</option>
    <option>Hamburg</option>
</select>
 <div>
    <ul class="names" >
        <li ng-model="item" " ng-repeat="name in names | filter:query | filter:query2">
            {{name.firstname}}, {{name.lastname}}, {{name.age}}, {{name.location}}
        </li>
    </ul>
</div>
    <script type="text/javascript">
    function List($scope) {
        $scope.names = [
        {"firstname": "Carl",
        "lastname": "Luyk",
        "age": 20,
        "location":"Berlin"},
        {"firstname": "Carl",
        "lastname": "Moreen",
        "age": 20,
        "location":"Hamburg"},
        {"firstname": "Tom",
        "lastname": "Luyk",
        "age": 25,
        "location":"New York"},
        {"firstname": "Caren",
        "lastname": "Tilt",
        "age": 20,
    "location":"Paris"},
        {"firstname": "Caren",
        "lastname": "Orail",
        "age": 30,
        "location":"Hamburg"},
        ];
$scope.getData = function (names, query) {
  $scope.queryData = $filter('filter')(names, query);
  console.log($scope.queryData);
};



    }
    </script>

</body>
</html>  

你只需要注入$filter进入你的控制器:

Change

function List($scope) {

to

function List($scope, $filter) {

http://jsbin.com/isojof/2/ http://jsbin.com/isojof/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularjs:尝试获取过滤数据时$filter未定义 的相关文章

  • 在 Angular 单元测试中应该如何处理运行块?

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为
  • AngularJS - RouteProvider 解析调用服务方法

    我创建了一项检查用户登录状态的服务 如果令牌存在 则登录用户 否则重定向到登录页面 最初我通过routeProvider解析调用了这个服务 这一次就可以完美工作 但是由于Angularjs服务是单例的 因此测试不会针对连续调用运行 然后 我
  • 如何使用 htaccess 将所有请求重定向到反应或角度索引?

    我正在使用react router 在react 中创建一个应用程序 早些时候 我对 Angular 做了同样的事情 但在这两种情况下 如果用户为 URL 添加书签并直接加载它 它将显示 404 错误 我们可以在 htaccess 中创建这
  • 使用 ng-if 改变角度方向

    我想通过单击将方向从 rtl 更改为 ltr and in 设置 html
  • Angular JS - 如何在模型更改时制作动画?

    当 currentVertical 改变时 我试图做一个很好的淡出 淡入过渡 在淘汰赛中 这很简单 但我在这里无法弄清楚 请帮忙 以下代码显示一个 UL 列表 当单击 LI 元素时 该列表 绑定 到 scope currentVertica
  • Angular JS + Node JS + Passport + Spring OAuth2 身份验证/授权

    我是 PassportJS 和 AngularJS 的新手 我对如何进行此授权有疑问 我有由 Oauth2 保护的 Spring REST API 但我必须像这样一起发送用户凭据 http localhost 8080 myapp oaut
  • Ionic-Angular.js 拍照并发送到服务器:空图像

    因此 我设法使用自定义指令通过 Angular js 将图像上传到我的服务器 我还成功地实现了 Cordova 的相机功能 现在我尝试连接两者 但是当将图像发送到服务器时 它们被存储为空 我认为问题在于我使用输入字段来获取图像 并且它获取了
  • $compile 不编译 Karma/Jasmine 中的模板

    我已经用 PhantomJS 和 Chrome 对此进行了测试 下列的这个问题 https stackoverflow com questions 27026596 accessing compiled template in unit t
  • 无法使用 Ninject 将依赖项注入到从 Angular 服务调用的 ASP.NET Web API 控制器中

    我将 Ninject 与 ASP NET MVC 4 一起使用 我正在使用存储库 并希望进行构造函数注入以将存储库传递给其中一个控制器 这是实现 StatTracker 接口的上下文对象 EntityFramework public cla
  • 使用 jasmine 在 angularJS 中注入服务来测试控制器

    我想了解如何使用 jasmine 和 angularJS 测试我的代码 我编写了一个带有控制器和注入服务的测试项目 现在我想测试控制器并尝试模拟注入的服务 但我没有找到一种方法来测试我的控制器的 到达 功能 这是我的jsfiddle htt
  • ng-submit 不允许自定义绑定提交事件

    我有一个指令 我想用它在提交表单时广播事件 我正在做的项目有很多表单 因此无法在ng submit调用的函数中广播事件 指示 directive form function return restrict E link function s
  • Angular,当任何资源处于待处理状态时显示加载

    我已经编写了一段代码来显示加载器 div 当任何资源处于待处理状态时 无论它是通过 http get 还是路由 ng view 获取的 我不仅仅想要信息 如果我变坏了 流程处理服务 app service flowHandler funct
  • AngularJS 指令:如何使用超时隐藏警报?

    昨天 我开始写一篇notification directive对于我的项目 我在 stackoverflow 上问了问题AngularJS 警报未显示 https stackoverflow com questions 16802846 a
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • 动态加载的输入框不执行任何操作

    所以我有一些 html 会根据用户所在的 QuestionNumber 动态加载到 panel div 中 这不是全部代码 而是我认为的所有相关代码 无论如何
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • 将 visjs 网络导出为 jpeg/png 图像

    我正在研究 Angular vis js Vis js 在画布上工作 用于创建节点和节点之间的链接 有没有办法从 visj s 画布中获取图像 jpeg png 看看这个片段 我想它会对你有所帮助 在 vis 画布下 您将看到一个 PNG

随机推荐