<!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. PL/SQL学习笔记程序单元

    一:程序单元组成 一个PL/SQL程序单元主要包括三部分: 声明与定义部分:声明变量.常量.类型等:定义过程.函数等: 执行部分:执行PL/SQL语句:调用过程.参数:处理游标等: 异常处理部分:处理 ...

  2. mysql时间日期操作

    SELECT uid, SUBSTR(addtime,1,10) as 创建日期, endtime, TIMESTAMPDIFF(MINUTE, addtime, endtime) as 直播时长 f ...

  3. Ubuntu 16.04常用快捷键

    注意:在Linux下Win键就是Super键 启动器 Win(长按) 打开启动器,显示快捷键 Win + Tab 通过启动器切换应用程序 Win + 1到9 与点击启动器上的图标效果一样 Win + ...

  4. 最新的Delphi版本号对照

    The CompilerVersion constant identifies the internal version number of the Delphi compiler. It is de ...

  5. RabbitMQ五种消息队列学习（三）–Work模式

    由于在实际应用中,简单队列模型无法解决很多实际问题,而且生产者和消费者是一对一的关系.模型较为单一.故引入Work模式. 结构图 一个生产者.多个消费者. 一个消息只能被一个消费者获取. 测试实现:  ...

  6. 【20180111】【物流FM专访】贝业新兄弟李济宏：我们是如何做到大件家居B2C物流第一的？

    在2017年的双11中,贝业新兄弟承接了日日顺家装和卫浴行业的仓储和配送,上海仓和武汉仓双十一期间及时出库率为100%,KPI位列第一:此外,贝业新兄弟还是科勒18年以来中国区唯一的物流服务商以及宜家 ...

  7. zabbix之微信告警(python版)：微信个人报警，微信企业号告警脚本

    微信个人告警脚本 微信个人告警:使用个人微信,发送到微信群组,微信好友 两个脚本执行: 1)能连接网络2)先执行server.py,扫描登录微信,登录之后没有报错,打开新终端查看端口是否起来了3)在z ...

  8. 企业和个人都需要的终极跨平台全端解决方案 UniApp

    相信大家在平时开发过程中都会遇到这两类问题: 很多中小型企业要快速开发一个产品,这个产品至少需要覆盖平台范围为:ios.Android.web/H5.微信/支付宝小程序,那么需要的投入的人力成本.时间 ...

  9. Atitit 文员招募规范 attilax总结

    Atitit 文员招募规范 attilax总结 1. 概念 2 2. 文员招募范文 2 3. 重大意义 3 3.1. 第一层  文章撰写 能力 3 3.2. 第二次 文档管理能力 文档索引 检索查找 ...

  10. Roslyn如何实现简单的代码提示

    假如需要实现一个代码编辑器,其中一个很重要的功能是实现代码提示,类似VS的代码智能提示.下面用Roslyn编译器来实现一个简单的代码提示功能. 代码提示,首先必须需要知道对象的类型信息,然后通过迭代获 ...