如何在当前点击的按钮旁添加用户名？

Question

我有一个表，其中包含3列按钮像按钮名称像

createQuation1，createQuation2，createQuation3。

当用户在弹出窗体显示中点击creatQuation1时。当提交表单userInput的值被附加到createQuestion1旁时。当用户点击createQuestion2按钮时，同样的弹出框会再次打开，并填充表单和提交输入字段被添加到creatQuestionaire2旁边。

html 
---- 
<div ng-controller="MyCtrl"> 

<table> 
    <tr ng-repeat="btn in createQueBtns"> 
    <td><buton ng-click="showOverlay();" style="background:#3de;padding:0px 2px;;margin:25px;">{{btn.create}}</buton> 
    <!-- append dynamic button bellow after submiting form--> 
    <div ng-repeat="name in data"><button ng-show="name.length > 0" ng-click='getUserDetails(name)'> {{name}}</button></div> 
</div> 
    </td> 
    </tr> 
</table> 

<div ng-show="overlay" class="overlay"> 

    <form> 
    <input type="text" nga-model="user.name" /> 
    <input type="button" ng-click="sayName(user.name);" value="sayName"/> 
    </form> 
</div> 

script 
----- 
var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
//collection data 
$scope.data = []; 
$scope.sayName = function(data){ 
$scope.data.push(data); 
}; 
// get the data 
$scope.getUserDetails = function(data){ 
alert(data) 
}; 
//creating buttons 
$scope.createQueBtns = [ 
{ "create":"createQueBtn1"}, 
    {"create":"createQueBtn2"}, 
    {"create":"createQueBtn3"} 
]; 
$scope.showOverlay = function(){ 
$scope.overlay = true; 
} 
} 

css 
--- 
.liked { 
    color: green; 
} 
.overlay{ 
    box-shadow:1px 1px 10px 10px #cd4; 
    padding:10px; 
    magin:10px; 
} 
.disliked { 
    color: red; 
} 
table tr td{ 
border:1px solid #ccc;padding:5px;margin:5px; 
} 

我加入的jsfiddle代码：http://jsfiddle.net/wboxqqu0/6/

Answer 1

见

HTML：

<table> 
    <tr ng-repeat="btn in createQueBtns"> 
    <!-- [[[changes here]]]--> 
    <td><buton ng-click="showOverlay(btn.create);" style="background:#3de;padding:0px 2px;;margin:25px;">{{btn.create}}</buton> 
    <!-- append dynamic button bellow after submiting form--> 
    <!-- [[[changes here]]]--> 
    <div ng-repeat="name in data[btn.create]"><button ng-show="name.length > 0" ng-click='getUserDetails(name)'> {{name}}</button></div> 
</div> 
    </td> 
    </tr> 
</table> 

<div ng-show="overlay" class="overlay"> 

    <form> 
    <input type="text" ng-model="user.name" /> 
    <input type="button" ng-click="sayName(user.name);" value="sayName"/> 
    </form> 
</div> 

的Javascript：

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
//collection data 
// [[[changes here]]] 
$scope.data = {}; 
$scope.sayName = function(data){ 
// [[[changes here]]] 
$scope.data[$scope.selected] = $scope.data[$scope.selected] || []; 
$scope.data[$scope.selected].push(data); 
}; 
// get the data 
$scope.getUserDetails = function(data){ 
alert(data) 
}; 
//creating buttons 
$scope.createQueBtns = [ 
{ "create":"createQueBtn1"}, 
    {"create":"createQueBtn2"}, 
    {"create":"createQueBtn3"} 
]; 
$scope.showOverlay = function(btn){ 
// [[[changes here]]] 
$scope.selected = btn; 
$scope.overlay = true; 
} 
} 

http://jsfiddle.net/wboxqqu0/7/

问题是，存储数据的方式无法帮助您引用您单击的特定按钮。