澳门威尼斯人酒店


澳门威尼斯人酒店现在总算平静了!澳门威尼斯人酒店故事发现不了心事
澳门威尼斯人酒店 如果有那么一天
澳门威尼斯人酒店昨天开会时候我跟刚刚毕业的员工讲:  “做销售,只能厚脸皮,要吃了熊心豹子胆的气魄,  才能成单赚钱金项链!”  然后今天我正在去动物园赎人的路上了。。澳门威尼斯人酒店联控仪的销售情况很棒,连带着拥有远利两成股权的赵仲文一夜之间亦成了富豪。澳门威尼斯人酒店 入夜听雨
澳门威尼斯人酒店是啊,我什么时候变得这么优柔寡断了?澳门威尼斯人酒店天九厅沸腾了……澳门威尼斯人酒店这里就是国家的秘密装备研究所!也就是秘密基地。澳门威尼斯人酒店郝仁你就收了这个老板的钱吧,如果你不收的话,人家会说你不给他脸子!澳门威尼斯人酒店宴笑良朋,患难知交与君相好,一生终了尘缘道上并不萧条
澳门威尼斯人酒店仰望天空任由眼泪激划下巴,月光透过树枝折射无助的脸颊。苦笑,一直为你停留的身躯,以为你会像往常一样不止五十反回来将我从身后拥起。我就会速擦眼泪紧紧与你相拥,彼此不需要任何解释前一分的不对。但是,这次你是如此无情,树底下狠狠甩开我极力挽留的手。不惜反抗将我推到,然后无情转身快步离去,留下狼狈不堪的我。看着你远去的背影,高傲冷酷无情的白狼,我不再是你想要保护的白羊。呵,这样的场景多么像狗血剧里的景象!
澳门威尼斯人酒店我先是诧异,后才恍然大悟,知道自己掉进了车长的陷阱。

皇冠足球比分

大发论坛时时彩平台尊龙娱乐是黑网吗海天国际娱乐城注册送钱凯发娱乐亚美国际娱乐城 金龙国际 www.am8.com 亚洲城娱乐 老k国际娱乐城 666k8.com 金威国际娱乐城 名人国际娱乐城 ag娱乐平台 V博娱乐城 真钱跑胡子澳门赌博网站网上洗码官网澳门博彩在线168版轮盘九龙内慕好运城娱乐城真人赌博女人澳门赌场赌博经历注册送钱e8889.com澳门利澳赌场名仕国际棋牌

7-ng-repeat指令实例以及扩展部分

在前面的文章中学习filter过滤器,现在在结合着看看ng-repeat指令,举个例子。

<div ng-controller="Aaa">
    <table border="1">
        <tr>
            <th ng-click="fnSort('name')">颜色</th>
            <th ng-click="fnSort('age')">值</th>
        </tr>
        <tr ng-repeat="data in dataList">
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
        </tr>
    </table>
</div>
<script type="text/javascript">

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['scope','filter',function(scope,filter){
        scope.dataList = [
            {name : 'red',age : 20},
            {name : 'yellow',age : 30},
            {name : 'blue',age : 40},
            {name : 'green',age : 50}
        ];
        scope.fnSort = function(type){
            arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
            scope.dataList = filter('orderBy')(scope.dataList,type,arguments.callee['fnSort' + type]);
        };
    }]);

</script>

先介绍一下ng-repeat指令,他是用来遍历数据的。

ng-repeat="data in dataList",dataList是控制器里的数据,data就好比变量名,视图里的{{data.name}}表示数据里name对象。

其他的在前面都介绍过了。

在颜色和值上面绑定了fnSort方法,在fnSort方法里接受类型。

arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type]; 这句代码得到一个布尔值,来使用filter的排序方法来控制数据的正反排序。

上面的例子很简单,我们再为它加上一个搜索的功能!

 

<div ng-controller="Aaa">
    <input type="text" ng-model="filterVal"><input type="button" ng-click="fnSearch()" value="搜索">
    <table border="1">
        <tr>
            <th ng-click="fnSort('name')">颜色</th>
            <th ng-click="fnSort('age')">值</th>
        </tr>
        <tr ng-repeat="data in dataList">
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['scope','filter',function(scope,filter){
        scope.dataList = [
            {name : 'red',age : 20},
            {name : 'yellow',age : 30},
            {name : 'blue',age : 40},
            {name : 'green',age : 50}
        ];
        scope.fnSort = function(type){
            arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
            scope.dataList = filter('orderBy')(scope.dataList,type,arguments.callee['fnSort' + type]);
        };
        scope.fnSearch = function(){
            scope.dataList = filter('filter')(scope.dataList,scope.filterVal);
        };
    }]);

</script>

我们声明了一个fnSearch方法,接受在视图中的ng-model数据,再使用filter的筛选功能,是不是很方便,回想下如果是用JQ来实现需要多少代码。。。

假设我们搜索'l',那麽yellow和blue会正常的筛选出来。

并没有问题,如果在次输入'r',应该会筛选出red和green才对!可是我们发现什麽都没有。。。

注意fnSearch方法里的这句代码,scope.dataList = filter('filter')(scope.dataList,scope.filterVal); 我们在scope.dataList数据里搜索,scope.dataList在上一次搜索里,就仅剩yellow和blue两条数据,所以就搜索不到关于'r'的数据了,这个时候就声明一个局部的变量,方便第二次搜索依然是完整的数据。

完整代码:

<div ng-controller="Aaa">
    <input type="text" ng-model="filterVal"><input type="button" ng-click="fnSearch()" value="搜索">
    <table border="1">
        <tr>
            <th ng-click="fnSort('name')">颜色</th>
            <th ng-click="fnSort('age')">值</th>
        </tr>
        <tr ng-repeat="data in dataList">
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['scope','filter',function(scope,filter){
        var oriArr = [
            {name : 'red',age : 20},
            {name : 'yellow',age : 30},
            {name : 'blue',age : 40},
            {name : 'green',age : 50}
        ];
        scope.dataList = oriArr;
        scope.fnSort = function(type){
            arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
            scope.dataList = filter('orderBy')(scope.dataList,type,arguments.callee['fnSort' + type]);
        };
        scope.fnSearch = function(){
            scope.dataList = filter('filter')(oriArr,scope.filterVal);
        };
    }]);

</script>

 

 

上面用了ng-repeat只是最简单的遍历,现在看看ng-repeat的扩展部分。

ng-repeat-start以及ng-repeat-end,他们可以灵活控制遍历形式。

<div ng-controller="Aaa">
    <div ng-repeat-start="data in dataList" class="active">{{data.name}}</div>
    <p>{{data.age}}</p>
    <div ng-repeat-end>{{data.name}}</div>
</div>

<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['scope',function(scope){
        scope.dataList = [
            {name : 'red',age : 20},
            {name : 'yellow',age : 30},
            {name : 'blue',age : 40},
            {name : 'green',age : 50}
        ];
    }]);

</script>

除此之外,还有6中扩展方法,还是上面的例子。

<div ng-controller="Aaa">
    <ul>
        <li class="{{even ? 'active' : ''}}" is-even="{{even}}" ng-repeat="data in dataList" data-i="{{index}}">{{data.name}}</li>
        <!-- index 索引,值 -->
        <!-- first 第一个值,布尔类型 -->
        <!-- last 最後一个值,布尔类型 -->
        <!-- middle 去除头尾的中间项,布尔类型 -->
        <!-- even 奇数,布尔类型 -->
        <!-- odd 偶数,布尔类型 -->
    </ul>
</div>

<script type="text/javascript">

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['scope',function(scope){
        scope.dataList = [
            {name : 'red',age : 20},
            {name : 'yellow',age : 30},
            {name : 'blue',age : 40},
            {name : 'green',age : 50}
        ];
    }]);

</script>

这6中扩展方法除了索引之外,都是布尔类型。

 

 

 

 

学习笔记,如有不足,请指正!转载请保留原文链接,谢谢。

最後,微博求粉,谢谢。

 

posted @ 2015-11-24 21:08 小谢53 阅读(...) 评论(...) 编辑 收藏