<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<style>

    img{

        width:100px;

        height:100px;

    }

    .w100{width: 100px;}

    .text-center{

        text-align: center;

    }

</style>

</head>

<body ng-app="myApp" ng-controller="myCtrl as ctrl">

<table border='1' width="80%">

    <tr ng-repeat="a in tableList">

        <td class="w100">{{$index + 1}}</td>

        <td class="w100">{{a.code}}</td>

        <td class="w100">{{a.name}}</td>

        <td><input type="text" ng-focus="display(a.code)" ng-blur="hide(a.code)" ng-init="init(a.code)"/></td>

        <td><input type="text" ng-focus="display(a.name)" ng-blur="hide(a.name)" ng-init="init(a.name)"/></td>

    </tr>

</table>

<table>

    <tr>

        <td class="w100"></td>

        <td class="w100"></td>

        <td class="w100"></td>

        <td>

            <div ng-repeat="a in tableList" ng-show="{{a.code}}" >

                <img ng-src="./{{a.code}}.jpg">

            </div>

        </td>

        <td>

            <div ng-repeat="a in tableList" ng-show="{{a.name}}" >

                <img ng-src="./{{a.name}}.jpg">

            </div>

        </td>

    </tr>

</table>

<div class="text-center">

    <button>确定</button>

</div>

</body>

<script>

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

    app.controller('myCtrl', function($scope) {

        var dutyCode = {

            B001: 'B001',

            B002: 'B002',

            B003: 'B003'

        }

        $scope.tableList = [

            {code: "B001", name: "A0001"},

            {code: "B002", name: "A0002"},

        ];

        $scope.init = function(el){

            var tempVar = el;

            $scope[tempVar] = false;

        }

        $scope.display = function(el){

            var tempVar = el;

            $scope[tempVar] = true;

        }

        $scope.hide = function(el){

            var tempVar = el;

            $scope[tempVar] = false;

        }

    });

</script>

</html>

angularjs实例的更多相关文章

  1. Flask+ Angularjs 实例： 创建博客

    允许任何用户注册 允许注册的用户登录 允许登录的用户创建博客 允许在首页展示博客 允许登录的用户退 后端 Flask-RESTful - Flask 的 RESTful 扩展 Flask-SQLAlc ...

  2. AngularJS实例实战

    学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...

  3. AngularJs 实例

    1.AngularJs 表单验证: 示例 .controller('signupController', ['$scope', function($scope) { $scope.submitted ...

  4. Angularjs实例5

    <!DOCTYPE html><html lang="zh-cn" ng-app="myApp"><head><met ...

  5. Angularjs实例2

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Angularjs实例4

    <!DOCTYPE html><html lang="zh-cn" ng-app=""><head><meta htt ...

  7. Angularjs实例3

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Angularjs实例应用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Angularjs实例1

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. libreoffice python 操作word及excel文档

    1.开始.关闭libreoffice服务: 开始之前同步字体文件时间,是因为创建soffice服务时,服务会检查所需加载的文件的时间,如果其认为时间不符,则其可能会重新加载,耗时较长,因此需事先统一时 ...

  2. 哪些 Python 库让你相见恨晚？【转】

    原文链接:https://www.zhihu.com/question/24590883/answer/92420471 原文链接:Python 资源大全 ---------------- 这又是一个 ...

  3. BOOST 线程完全攻略

    1 创建线程 首先看看boost::thread的构造函数吧,boost::thread有两个构造函数: (1)thread():构造一个表示当前执行线程的线程对象: (2)explicit thre ...

  4. 【Vegas原创】Excel中，日期和时间用&连接后格式不正确的解决方法

    =TEXT(B2+C2,"yyyy-mm-dd hh:mm:ss")

  5. vivado和modelsim联合调试仿真

    vivado和modelsim联合调试仿真 0赞 发表于 2017/5/10 19:10:59 阅读(881) 评论(0) 使用vivado和modelsim联合调试仿真时,在破解完modelsim后 ...

  6. 物联网架构成长之路(27)-Docker练习之Zookeeper安装

    0. 前言 准备了解一下消息队列MQ,对比了一些开源的中间件,最后选择Kafka作为以后用到的消息队列,消息队列的应用场景及Kafka与其他消息队列的优缺点这里就不细说了,具体的可以参考其他博客说明. ...

  7. 获取CPU序列号的Delphi程序

    Unit CPUid; Interface Type TCpuType = (cpu8086, cpu286, cpu386, cpu486, cpuPentium); Function CpuTyp ...

  8. 空的OnGUI也会有gc

    一个空场景,添加如下代码: using System.Collections; using System.Collections.Generic; using UnityEngine; public ...

  9. kafka性能测试

    参考阿里中间件团队博客的博文 Kafka vs RocketMQ——多Topic对性能稳定性的影响 使用的测试工具为Jmeter

  10. 蜕变成蝶~Linux设备驱动中的并发控制

    并发和竞争发生在两类体系中: 对称多处理器(SMP)的多个CPU 内核可抢占的单CPU系统 访问共享资源的代码区域称为临界区(critical sections),临界区需要以某种互斥机制加以保护.在 ...