首页 > Web开发 > 详细

angularjs 利用filter进行表单查询

时间:2016-01-13 12:17:01      阅读:238      评论:0      收藏:0      [点我收藏+]

页面:

技术分享
<div>
    <input style="width:90%;margin-left:5px;margin-right:5px;" class="form-control sys_input" ng-model="imagePaths.filter.imageName" placeholder="查询..."/>
</div>
<div>
    <!--<ul ng-repeat="item in imagePaths.imageinfo | filter:imagePaths.filter">
        <li><img width="40px" height="40px" ng-src="http://127.0.0.1:8099/{{item.imageName}}">{{item.imageLength/1024 | number:0}}KB<a href="http://127.0.0.1:8099/{{item.imageName}}" target="_blank">{{item.imageName}}</a>
        <button type="button" ng-click="imageDownload(item)">下载</button></li>
    </ul>-->
     <table class="table table-hover table-bordered" style="width:90%;margin-left:5px;margin-right:5px;">
        <tbody>
            <tr ng-repeat="item in imagePaths.imageinfo | filter:imagePaths.filter" style="height:30px;">
                <td><img ng-src="http://127.0.0.1:8099/{{item.imageName}}"></td>
                <td>{{item.imageLength/1024 | number:0}}KB</td>
                <td>{{item.imageName}}</td>
                <td><button type="button" class="btn btn-warning btn-sm" ng-click="imageDownload(item.imageName)">下载</button></td>
            </tr>
        </tbody>                        
    </table>
</div>
View Code

这里主要说的是查询的数据结构:$scope.imagePaths=

{"imageinfo":

[{imageLength"19505",imageName"company_logo.png"},

{imageLength"116010",imageName"crashed_icon.png"},

{imageLength"116411",imageName"logo.png"}

]};

效果如图:

技术分享技术分享

angularjs 利用filter进行表单查询

原文:http://www.cnblogs.com/bobo-show/p/5126775.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!