<!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. Google Guava Stopwatch(计时器)

    Stopwatch stopwatch =newStopwatch().start(); //do something test for(int i =0; i <10000; i++){ } ...

  2. 网络协议学习（2）---IP地址

    一.IPv4地址 IPv4地址为32bit地址,分为5类(ABCDE,这里不讨论特殊用途的D和E类). 通常我们八位一看,写成4个部分,例如:00000000 00000000 00000000 00 ...

  3. 获取硬盘序列号的Fortran程序

    以前写了个获取硬盘序列号的fortran程序,但未经实证 program FortranDemo Use Kernel32 Implicit None Interface SUBROUTINE Get ...

  4. 【转载】Hadoop官方文档翻译——HDFS Architecture 2.7.3

    HDFS Architecture HDFS Architecture(HDFS 架构) Introduction(简介) Assumptions and Goals(假设和目标) Hardware ...

  5. Quartz与Spring Boot集成使用

    上次自己搭建Quartz已经是几年前的事了,这次项目中需要定时任务,需要支持集群部署,想到比较轻量级的定时任务框架就是Quartz,于是来一波. 版本说明 通过搜索引擎很容易找到其官网,来到Docum ...

  6. CPU与GPU性能的比较报告

    运行时间分析 不同的模型在cpu和gpu下的时间差异较大,一般来说gpu会比cpu快5-20倍.我们选用了最常用的inception v3的分类模型,输入图片尺寸为:3x299x299. GPU 在一 ...

  7. poi操作Excel的封装类

    这是一个简单的对poi的封装,只能简单的取值,设值,拷贝行,插入行等. 针对读取Excel模板后,填值再保存的应用,比较方便. poi版本:3.13 贴代码: package cn.com.gtmc. ...

  8. iOS开发小技巧 - UILabel添加中划线

    iOS开发小技巧 遇到的问题: 给Label添加中划线,然后并没有效果 NSString *str = [NSString stringWithFormat:@"合计金额 ¥%.2f&quo ...

  9. 解决wps/office 1-2自动转换1月2日，用样式解决此问题

    添加样式:  td{mso-number-format:"\@"; }

  10. Altium Designer学习---如何进行SI仿真

    Altium designer 如何进行SI仿真. 1.仿真电路中需要至少一块集成电路: 2.器件的IBIS模型: 3.在规则中必须设定电源网络和地网络: 4.建立SI规则约束: 5.层堆栈必须设置正 ...