当前位置:   HTML > 正文

根据输入框的内容过滤UL列表中的数据-AngularJs

angularjs,angularjs-filter,html,ajax,go,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我有一个输入框,用户可以在其中输入文本。基于此文本,我的UL列表项应被过滤。例如,在文本框中的“ Ab ”上-只有AbbasAbid必须显示在UL列表的

  • 标记中。

    index.html

    
    
    
    
    
     
    
    
    • {{x.name}}

    angularScript.js

    //1. appDeclaration
    var app = angular.module('myApp',[]);
    
    //2. controllers
    app.controller('myCtrl',function($scope){
        $scope.name = "Peter";
        $scope.people = [{"name":"Abbas"},{"name":"Tina"},{"name":"Abid"}];
    });
    

    有人可以帮我解决一些基于输入文本的过滤器,以便只填充与输入框中的文本匹配的lis吗?



    1> Chris Hermut..:

    首先,您的元素中需要一个ng-model 。

    然后,您的ng-repeat如下所示:

  • {{x.name}}
  • 参考 https://docs.angularjs.org/api/ng/filter/filter

    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/HTML/detail/3968
  • 推荐阅读
    • 如何解决《HTML5CSS3中长期最佳浏览器?》经验,为你挑选了1个好方法。browser,html5,compatibility,css3,html,css,安全,chrome,firefox,safari,webkit,DevBox,在... [详细]

    • 如何解决《FacebookConnect和HTML5,xmlns可用吗?》经验,为你挑选了1个好方法。xhtml,html5,compatibility,facebook,xml-namespaces,DevBox,在线流程图,编程,编程问... [详细]

    • 如何解决《我可以提交MVC6视图组件吗?》经验,为你挑选了1个好方法。asp.net-core,asp.net-core-viewcomponent,mvc,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,... [详细]

    • 如何解决《Flexboxdiv文本包装》经验,为你挑选了1个好方法。html,css,flexbox,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具... [详细]

    • 如何解决《如何控制Bootstrap手风琴表格的可见性》经验,为你挑选了1个好方法。html,javascript,css,jquery,twitter-bootstrap,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发... [详细]

    • 如何解决《使用Javascript下载HTML5mp4视频》经验,为你挑选了0个好方法。javascript,video,jquery,html5,html5-video,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工... [详细]

    • 如何解决《我们可以从DOM中删除一个元素吗?》经验,为你挑选了1个好方法。javascript,reactjs,https,facebook,git,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json... [详细]

    • 如何解决《什么时候我们应该使用RTLD_DEEPBIND?》经验,为你挑选了1个好方法。c,c++,gcc,dlopen,https,html,linux,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析... [详细]

    • 如何解决《如何将MDL按钮样式应用于filePicker?》经验,为你挑选了1个好方法。filepicker,material-design,material-design-lite,html,css,https,DevBox,在线流程图,... [详细]

    • 如何解决《在HTML/CSS中自定义和定位垂直滑块》经验,为你挑选了1个好方法。javascript,css,jquery,html5,cordova,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二... [详细]

    • 如何解决《按钮:使用JavaScript和CSS激活》经验,为你挑选了1个好方法。html,javascript,css,button,jquery,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维... [详细]

    • 如何解决《比较/对比HTML,XHTML,XML和HTML5》经验,为你挑选了5个好方法。html,xml,xhtml,html5,程序员,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,u... [详细]

    • 如何解决《如何使用reactjs添加平滑滚动返回顶部按钮?》经验,为你挑选了2个好方法。javascript,jquery,html5,css3,reactjs,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,jso... [详细]

    • 如何解决《在悬停时更改列表项目项目符号/数字颜色》经验,为你挑选了1个好方法。html,css,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端... [详细]

    • 如何解决《如何使用JavaScript创建等距拖放网格?》经验,为你挑选了1个好方法。html,javascript,css,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,... [详细]

    • 如何解决《Cycle.jsHTTP在添加加载指示符后发送多个请求》经验,为你挑选了1个好方法。cyclejs,git,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳... [详细]

    • 如何解决《动态添加ShareThis按钮时删除或自定义"via@ShareThis"》经验,为你挑选了1个好方法。javascript,twitter,html5,sharethis,DevBox,在线流程图,编程,编程... [详细]

    • 如何解决《使用jquery检查是否正在播放HTML5视频》经验,为你挑选了1个好方法。javascript,css,video,jquery,html5,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,... [详细]

    • 如何解决《document.getElementById因未知原因返回null》经验,为你挑选了1个好方法。html,javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,u... [详细]

    • 如何解决《在mvc5项目中使用角度指令模板url中的html文件》经验,为你挑选了0个好方法。asp.net-mvc,razor,angularjs,mvc,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,... [详细]

    相关标签
      

    闽ICP备14008679号