这个方法一般都会是和别的块状元素进行绑定同时使用的，废话不多说，直接上代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/amazeui.min.css">

    <script src="js/jq2.js"></script>

    <script src="js/amazeui.min.js"></script>

    <script src="js/angular.min.js"></script>

</head>

<body ng-app="">

    <div class="am-form-group">

        <label for="doc-select-1">请选择美图</label>

        <select id="doc-select-1" ng-model="pic">

            <option value="1">显示第1张美图</option>

            <option value="2">显示第2张美图.</option>

            <option value="3">显示第3张美图</option>

            <option value="4">显示第4张美图</option>

        </select>

        <span class="am-form-caret"></span>

    </div>

    <ul class="am-avg-sm-4 am-thumbnails" ng-switch="pic">

        <li ng-switch-when="1"><img class="am-thumbnail" src="data:images/1.jpg" /></li>

        <li ng-switch-when="2"><img class="am-thumbnail" src="data:images/2.jpg" /></li>

        <li ng-switch-when="3"><img class="am-thumbnail" src="data:images/3.jpg" /></li>

        <li ng-switch-when="4"><img class="am-thumbnail" src="data:images/4.jpg" /></li>

        <li ng-switch-default><img class="am-thumbnail" src="data:images/5.jpg" /></li>

    </ul>

</body>

<script>

</script>

</html>

效果如下所示：

我们也可以看下网上一些手册上的用法：

夺命雷公狗—angularjs—5—ng-switch的用法实现下拉更换板块的实现的更多相关文章

  1. 夺命雷公狗—angularjs—8—ng-class的简单用法

    我们在正常的业务处理中往往会遇到一些逻辑类的问题,比如各行换色,现在angularjs里面也给我们提供了一个小小的的class处理的方式,废话不多说,如下所示: <!doctype html&g ...

  2. 夺命雷公狗—angularjs—6—单条数据的遍历

    我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...

  3. 夺命雷公狗—angularjs—25—angular内置的方法（高级）

    查看版本信息 angular.version console.log(angular.version); 判断是否相等 angular.equals() var str1 = ''; var str2 ...

  4. 夺命雷公狗—angularjs—24—extend继承对象

    我们的angularjs中也是给我们留下了方法来做继承的,那么他就是传授中的extend... 不过要如下所示,第二个参数是继承到第一个对象里面的... <!DOCTYPE html> & ...

  5. 夺命雷公狗—angularjs—23—copy拷贝对象

    copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp&qu ...

  6. 夺命雷公狗—angularjs—22—bind改指向和传参方式

    在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ...

  7. 夺命雷公狗—angularjs—19—angular-route

    ngRoute包括的内容 ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式.ng的路由(ngRoute) ...

  8. 夺命雷公狗—angularjs—16—angularjs里面的缓存

    强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的.... <!DOCTYPE html> <html lang=" ...

  9. 夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout

    这里其实和js源生的效果是一样的,但是源生的在angularjs里面不能直接正常执行代码如下所示: <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. php--validate表单验证实例

    验证效果:

  2. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

  3. 解决VS2010无法打开，提示无法找到atl100.dll的方法

    这个问题是卸载VS2010一些组件造成的误删问题,且从网上下的atl100.dll通常与自己的VS2010不符 解决方法: 从路径:C:\Program Files\Microsoft Visual ...

  4. li有无缩略图样式调取

    <div class="part3list">[field:array runphp='yes']@me = (strpos(@me['litpic'],'defaul ...

  5. POJ1326问题描述

    Description Mileage program of ACM (Airline of Charming Merlion) is really nice for the travelers fl ...

  6. Android SnapHelper

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/53386286 SnapHelper 是 Android Support Library ...

  7. you need to upgrade the working copy first

    is too old (format 29) to work with client version '1.9.4 (r1740329)' (expects format 31) 2016年09月18 ...

  8. 对memcpy函数的改进

    void *mymemcpy(void *dst,const void *src,size_t num) { assert((dst!=NULL)&&(src!=NULL)); int ...

  9. C# MySqlHelper

    1.MySql官方提供ADO.NET访问模式的MySql.Data.dll,下载地址:http://dev.mysql.com/downloads/connector/net/ 2.MySqlHelp ...

  10. shell eval用法

    转自:http://blog.csdn.net/w_ww_w/article/details/7075867 eval可读取一连串的参数,然后再依参数本身的特性来执行.eval是shell内建命令,可 ...