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