記錄angular遍歷的元素隱藏顯示修改
阿新 • • 發佈：2019-02-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular/angular.min.js" type="text/javascript"></script> <style> .table tr{margin-bottom:15px; float: left; width:100%;} .table tr td{margin-right:100px;float: left;} .table tr td a{cursor:pointer;} </style> </head> <body ng-app="myApp" ng-controller="personCtrl"> <table class="table"> <tr ng-repeat="xxx in companyListInfo"> <td> <span>{{xxx.companyName}}</span> </td> <td> <span>企業郵箱:{{xxx.nameD}}</span> <a ng-click="actions.add(xxx.id+'1')">+</a> <input type="text" ng-if="data.dropdownMenu == xxx.id+'1'"/> </td> <td> <span>企業型別:{{xxx.nameE}}</span> <a ng-click="actions.add(xxx.id+'2')">+</a> <input type="text" ng-if="data.dropdownMenu == xxx.id+'2'"/> </td> <td> <span>企業官網:{{xxx.nameW}}</span> <a ng-click="actions.add(xxx.id+'3')">+</a> <input type="text" ng-if="data.dropdownMenu == xxx.id+'3'"/> </td> <td> <span>企業官網:{{xxx.nameW}}</span> <a ng-click="actions.add(xxx.id+'4')">+</a> <input type="text" ng-if="data.dropdownMenu == xxx.id+'4'"/> </td> </tr> </table> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope,$interval) { $scope.showtext = false; $scope.companyListInfo = [ {id:"1",companyName:"公司1",nameD:"成都市",nameE:"網路01",nameL:'私營',nameW:''}, {id:"2",companyName:"公司2",nameD:"北京市",nameE:"網路02",nameL:'公立',nameW:'www1'}, {id:"3",companyName:"公司3",nameD:"上海市",nameE:"網路03",nameL:'合資',nameW:'www2'}, {id:"4",companyName:"公司4",nameD:"深圳市",nameE:"網路04",nameL:'外企',nameW:'www3'} ]; $scope.data = { dropdownMenu: "" }; $scope.num = 0; $scope.actions ={ add : function(id){ $scope.num++; $scope.data.dropdownMenu = id; alert($scope.data.dropdownMenu); } } }); </script> </body> </html>