<!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. Oracle 11g透明网关连接Sqlserver

    Oracle 11g透明网关连接Sqlserver oracle 透明网关是oracle连接异构数据库提供的一种技术.通过Gateway,可以在Oracle里透明的访问其他不同的数据库,如SQL Se ...

  2. CentOS 6.5 x64下查找依赖包，或用YUM安装

    查看某个命令YUM上的安装源 1)当某个命令不存时进行查询所依赖的包,如:pstree [root@localhost ~]# yum provides pstree 已加载插件:fastestmir ...

  3. Unable to find IPv4-only network bridge for LXD.

    https://github.com/conjure-up/conjure-up/issues/1440It seems like the the installation is complainin ...

  4. NameError:name ‘xrange’ is not defined

    运行某代码时,报错: NameError:name 'xrange' is not defined 原因: 在Python 3中,range()与xrange()合并为range( ).我的pytho ...

  5. PhpStorm连接Docker容器配置xdebug断点调试

    本教程主要演示xdebug在PhpStorm中配置方法. 一.环境说明 1.Mac笔记本(本教程演示过程使用的是Mac OS操作系统,和windows环境是有区别的,这一点需要特别注意): 2.在Ma ...

  6. idea 使用正则表达式 进行匹配替换

    关于正则表达式 可以参考相应的笔记 另外 如果要提取正则表达式中匹配到的内容,使用$1 - $... 按顺序取(第一个表达式 到 第N个表达式匹配到的数据),  这点和linux正则获取的方式是一样的

  7. iOS最新Mac OS X 10.11之后 安装cocoapods及使用详解

    iOS 最新版 CocoaPods 的安装流程 一.安装方法: 1.移除现有Ruby默认源 gem sources --remove https://rubygems.org/ 为了提高安装的成功几率 ...

  8. Servlet开发 中使用 log4jdbc 记录 hibernate 的 SQL信息

    一.前言 使用log4jdbc在不改变原有代码的情况下,就可以收集执行的SQL文和JDBC执行情况. 平时开发使用的ibatis,hibernate,spring jdbc的sql日志信息,有一点个缺 ...

  9. IDEA下搭建Shiro-web环境，总是报BasicDataSource，classnotfound；问题解决

    进入报错跟踪,查看加载的classloader中没有dbcp相关jar包 猜测结果是,jar没有被加载,但是maven引用没错,而且也能找到对应的class 后来又查看IDEA配置中,相关jar也引入 ...

  10. linux shell的here document用法(cat << EOF)

    什么是Here Document?Here Document 是在Linux Shell 中的一种特殊的重定向方式,它的基本的形式如下cmd << delimiter  Here Docu ...