angularjs实例

<!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>

相关阅读:
pycharm快捷键
Docker
Go语言与Elasticsearch
Celery与APScheduler
爬虫入门到入狱
数据分析
后台管理
Linux基础与自动化运维
微信小程序
Git

原文地址：https://www.cnblogs.com/cxxjohnson/p/10288830.html