具体代码如下所示：

find.html

！DOCTYPE html html ng-app='find '标题字符查找/title meta charset=' utf-8 '/script src=' http :/脚本/棱角分明。量滴js ' type=' text/JavaScript '/Script link rel='样式表href='./bootstrap-3。0 .0/CSS/bootstrap。CSS ' rel='外部无跟随'样式类型=' text/CSS '正文{ font-size : 12px} ul { list-style-type : no；宽度： 408像素；margin :0 pxpadding : 0 px } ul Li {左侧浮动：padding: 5px 0px } ul .bold { font-weight : bold；光标：指针；} ul li span { width: 70px向左浮动：padding: 0px 10px } ul .focus {底色： # cccccc}/样式脚本类型=' text/JavaScript ' var find=angular。模块(' find '，[])；find.controller('find_name '，['$scope '，function($ scope){ $ scope。bold=' bold$ scope . key=$ scope . data=[{ name : '张小琴，sex: '女，年龄： 24,分数： 95 },{姓名： '李清思，sex: '女，年龄： 27,分数： 87 },{姓名： '杨旭旭，sex: '男，年龄： 28,分数： 86 },{姓名： '陈楚圣，sex: '男，年龄： 23,分数： 97 }];}])/脚本/头体div ng-controller=' find _ name ' align=' center ' div class=' panel panel-primary ' align=' center ' style=' height : 300 px ' div class=' panel-heading ' align=' center ' div class=' panel-title ' style=' font-size 3360 22px '字符查找/div /div输入id=' txt key ' type=' text ' ng-model=' key ' style=' margin-top : 10px；高度： 30px宽度： 200像素占位符='请输入姓名关键字//div ul Li ng-class=' { { bold } } ' style=' font-size : 16px；边距-top : 5px；'跨度序号/span跨度姓名/span跨度性别/span跨度年龄/span跨度分数/span/Li ng-repeat=' stu in data | filter : { name : key } ' style=' font-size : 16px ' span { $ index 1 } }/span { { stu。name } }/span { { stu。性。年龄。score } }/span/Li/ul/div/body/html截图：

以上所述是小编给大家介绍的Bootstrap AngularJS实现简单的数据过滤字符查找，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！