Question

我有一个弹出窗口，可以在弹出窗口中动态创建输入框。我想在父视图上显示该文本框的内容。文本框的动态ID动态为1,2,3等等。如果我想要在父视图中显示它我需要循环它。但是如何将文本框中的文本分配给变量并在父屏幕上查看它。

    //popuphtmlfile


    <h3 style="color: #0d7dc1;">Selection Of TextBoxes</h3>
        <br>
            <ul>
                <li ng-repeat="textbox in textboxes">
                    Label For Inputfield:
                        <input type="text" id="in_{{$index}}"/><button class="btn btn-sm btn-default" ng-click="deletetxtbox()">-</button>
                </li>
                <li>
                    <button class="btn btn-default" ng-click="expndtxt()">Click to add textboxes</button>
                </li>
          </ul>
        <button type="submit"  class="btn btn-default pull-right" ng-click="savebutton()">Save</button>
        <button class="btn btn-default" ng-click="cancl()">Cancel</button>

//js file

//for appending textboxes on button click
$scope.expndtxt=function(){


        $scope.textboxes.push({
        });
    };

//deleting if we no need any textbox on the popup
    $scope.deletetxtbox=function(index){

         $scope.textboxes.splice(index, 1);
    };

//if save button is clicked ,when i enter anythnng in the textboxes that must me added to the parent view as a label with a textbox again.


    $scope.savebutton=function(){

        angular.forEach($scope.textboxes,function(t)
                {

                    //The content of text box must be displayed as label name with a new text box
                });

    };

Answer 1

我正在更新我的答案以解决您的最新评论。

这是一个显示如何向动态添加的文本框添加标签的插件。 http://plnkr.co/edit/MR9PG0S7PNMNwm7fNX7m?p=preview

代码很简单。

弹出式HTML格式

<p>Enter label text:</p>
<input type="text" id="generateNew" data-ng-model="box" />
<button class="btn btn-default" ng-click="expndtxt(box)">Click to add textboxes</button>

父级的HTML

<li ng-repeat="box in textboxes">
  <label for="box_{{box.id}}">{{box.label}}</label>&nbsp;<input name="box_{{box.id}}" type="textbox" id={{box.id}} data-ng-model="newBox" />
</li>

控制器代码

var counter=0;
$scope.textboxes = [];
$scope.expndtxt = function(tBox){
  counter++;
  $scope.textboxes.push(  { id:counter, label : tBox} );
  $event.preventDefault();
};

Answer 2

您可以绑定ng-change指令，并在文本更改时在每个文本框上绑定，您可以将其值保存到相应的文本框对象中，以便稍后进行更改。

  //popuphtmlfile


    <h3 style="color: #0d7dc1;">Selection Of TextBoxes</h3>
        <br>
            <ul>
                <li ng-repeat="textbox in textboxes">
                    Label For Inputfield:
                        <input type="text" id="in_{{$index}}" ng-model="textBoxModel[$index]" ng-change="onChange(textBoxModel[$index])"/>
                        <button class="btn btn-sm btn-default" ng-click="deletetxtbox()">-</button>
                </li>
                <li>
                    <button class="btn btn-default" ng-click="expndtxt()">Click to add textboxes</button>
                </li>
          </ul>
        <button type="submit"  class="btn btn-default pull-right" ng-click="savebutton()">Save</button>
        <button class="btn btn-default" ng-click="cancl()">Cancel</button>

//js file

//for appending textboxes on button click
$scope.expndtxt=function(){


        $scope.textboxes.push({
        });
    };

//deleting if we no need any textbox on the popup
    $scope.deletetxtbox=function(index){

         $scope.textboxes.splice(index, 1);
    };

//if save button is clicked ,when i enter anythnng in the textboxes that must me added to the parent view as a label with a textbox again.


    $scope.savebutton=function(){

        angular.forEach($scope.textboxes,function(t)
                {

                    //The content of text box must be displayed as label name with a new text box
                    //here you can get each textbox text attribute
                    t.text;
                });

    };

//onChange function which will get all text from text-boxes and store it to it's correspondive object

$scope.textBoxOnChange = function(textboxmodel,texboxobject){
    texboxobject.text = textboxmodel;
};

如何在angularjs中从弹出窗口检索值到父视图？

2 个答案: