javascript - 如何在当前单击的按钮旁边附加用户名？

Question

我有一个包含 3 列的表格，其中包含类似按钮名称的按钮

createQuation1、createQuation2、createQuation3。

当用户在弹出表单显示中单击 creatQuation1 时。当提交表单 userInput 值附加到 createQuestion1 旁边时。当用户单击 creatQuestionaire2 按钮时，将再次打开相同的弹出窗口，并在 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/

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