<!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. 每天一个linux命令:vmstat

    1.命令简介 vmstat(Virtual Memory Statistics 虚拟内存统计) 命令用来显示Linux系统虚拟内存状态,也可以报告关于进程.内存.I/O等系统整体运行状态. 2.用法 ...

  2. 微信小程序--相关资料

    微信小程序Demo https://github.com/zce/weapp­-demojustjavac/awesome­wechat­weapp: 微信小程序开发资源汇总 https://gith ...

  3. sudo: unable to execute ./script.sh: no such file or directory

    I just had this exact problem, it turned out to be a text file encoding problem. For me to fix it wh ...

  4. GCC:/usr/lib/libstdc++.so.6: version GLIBCXX_3.4.15 not found

    源码编译升级安装了gcc后,编译程序或运行其它程序时,有时会出现类似/usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found的问题.这 ...

  5. [python] ThreadPoolExecutor线程池 python 线程池

    初识 Python中已经有了threading模块,为什么还需要线程池呢,线程池又是什么东西呢?在介绍线程同步的信号量机制的时候,举得例子是爬虫的例子,需要控制同时爬取的线程数,例子中创建了20个线程 ...

  6. Ubuntu apt 使用代理

    . . . . . 由于一台 Ubuntu 主机无法直接连接外网,但同内网的另一台 Windows 主机可以连接外网,于是在 Win 主机上搭建了代理服务,使 Ubuntu 主机通过代理更新系统. 记 ...

  7. 【RPC】手撸一个简单的RPC框架实现

      涉及技术   序列化.Socket通信.Java动态代理技术,反射机制   角色   1.服务提供者:运行在服务端,是真实的服务实现类   2.服务发布监听者:运行在RPC服务端,1将服务端提供的 ...

  8. js this 引起的祸

    注意:这里的 this 指向已经改变了. 所以不能再次使用 this 需在上面自定义变量. 那些年踩过的坑,记录一下.

  9. Linux 公网IP和内网IP，Dubbo提供者注册到了内网IP上怎么处理！

    1.将Linux的localhost 改为公网IP: 改完以后重启网卡,并刷新Hosts: 2.将提供者和消息者的Dubbo 都改为公网IP: 3.开放端口:

  10. 【12c】12c RMAN新特性之通过网络远程恢复数据库（RESTORE/Recover from Service）

    [12c]12c RMAN新特性之通过网络远程恢复数据库(RESTORE/Recover from Service) 通过网络远程恢复数据库(Restore/Recover from Service) ...