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