Question

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

createQuation1，createQuation2，createQuation3。

当用户在弹出窗体显示中单击creatQuation1时。在createQuestion1旁边附加提交表单userInput值时。当用户单击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/

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

如何在当前点击的按钮旁附加userName？

1 个答案: