angular js：由单独块中的函数返回的数组值答案

【问题标题】：angular js: array value returned by a function in separate blocksangular js：由单独块中的函数返回的数组值
【发布时间】：2015-08-04 09:27:20
【问题描述】：

制作一个我需要使用角度 js 数组的程序，我需要以良好的方式显示函数返回的角度 js 数组元素。就像第一个包含第一个元素，第二个包含第二个元素等等......并且必须使用函数来执行一些未来的任务。提前致谢例如：-

第一次尝试：- 第一个元素= 23 第二个元素 = 45

第二次尝试：- 第一个元素= 20 第二个元素 = 15

第三次尝试...第四次尝试等等

      <head>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>

      </head>
      <body><div ng-app="plunker" ng-controller="MainCtrl">

           <div ng-repeat='selecting in selects'  ng-init="selecting.var1=selecting.var2=a='';"> 

        <input type="text" ng-model="selecting.var1">
        <input type="text" ng-model="selecting.var2">

      <button type='button' ng-click='remove(selecting)'>Remove</button>
      </div>
      <div>
        <button type='button' ng-click='add()'>Add</button>
       </div>
       <p>{{ x = test()}}</p>
      <!-- first block -->
      <!-- second block and so on--> 
      <li ng-repeat="x in b" style="list-style:none">
     first attempt=  {{ x.first  | number:0  }} <br>
     second second= {{ x.second | number:0}}
      </li>
      </div>

      <script>
         var app = angular.module("plunker",[]);
         app.controller("MainCtrl",['$scope',function($scope){


              $scope.test = function()
              {
                     var result=1,id2,a,b;
                     $scope.result1 = [{}];

                         angular.forEach($scope.selects, function(value)
                         { // loop over array to process all items
                            a = value.var1;
                            b = value.var2;
                            alert(a);

                        $scope.result1.push({name:$scope.selecting.var1});
                            //myarray = {"first":a,"second":b}
                            //a['first','second'] = (a,b);
                                return result1;
                        })
              }
              $scope.selects = [{}]; // default 1 sets
            // functions to ADD/Remove --------------------------------------------------------------------------------
              $scope.add = function() 
              {
                        $scope.selects.push({});
              }
              $scope.remove = function(item) 
              {
                        angular.forEach($scope.selects, function(value, key) 
                        {
                            if (value == item) 
                            {
                                $scope.selects.splice(key, 1);
                            }
                        });
             }
            // functions to ADD/Remove ---------------------------------------------------------------------------------

        }]);
      </script>
      </body>

    </html>

【问题讨论】：

真正的问题是什么？
我的意思是我将文本框值传递给一个函数..我们可以生成多个文本框。并且函数每次都会返回数组，其中第一行文本框的值..然后是第二行文本框的值，依此类推..
一会儿粘贴代码
jsfiddle.net/nitishkaushik/z6m78m2o/7
您能否将您的变量重命名为可能有助于我们理解您正在尝试执行的操作的名称。 ng-repeat="x in b" 太不清楚了。而且似乎b 甚至没有在$scope 上定义，所以它不会渲染。

标签： javascript html css angularjs

【解决方案1】：

我不知道您要在 test() 函数中实现什么，但如果您只是想显示 then 模型的内容，似乎不需要为此创建函数： Angular 为您保持模型同步，这是该框架的主要卖点之一。

这就是你想要达到的目标吗？

DEMO

<!DOCTYPE html>
<html ng-app="plunker">

<head>

  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>

</head>

<body>

  <div ng-app="plunker" ng-controller="MainCtrl">

    <div ng-repeat='textBoxes in textBoxGroups' > 

      <input type="text" ng-model="textBoxes.textBoxOne.value">
      <input type="text" ng-model="textBoxes.textBoxTwo.value">

      <button type='button' ng-click='remove($index)'>Remove</button>

    </div>

    <div>
      <button type='button' ng-click='add()'>Add</button>
    </div>

    <div>
      <button type='button' ng-click=doSomething()>Do Something</button>
    </div>

    <h3>Text Box Group Model</h3>

    <table>
      <thead>
        <tr>
          <th>$index</th>
          <th>TxtBox1</th>
          <th>TxtBox2</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='textBoxes in textBoxGroups'>
          <td>{{$index}}</td>
          <td>{{textBoxes.textBoxOne.value}}</td>
          <td>{{textBoxes.textBoxTwo.value}}</td>
        </tr>
      </tbody>
    </table>

     <h3>Char Count: {{charCount}}</h3>

      <h3 ng-show="processedData.length">Data After Some Process</h3>


    <table ng-show="processedData.length">
      <thead>
        <tr>
          <th>$index</th>
          <th>Original</th>
          <th>Updated</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='data in processedData'>
          <td>{{$index}}</td>
          <td>{{data.original}}</td>
          <td>{{data.updated}}</td>
        </tr>
      </tbody>
    </table>


  </div>




<script>

var app = angular.module("plunker",[]);

app.controller("MainCtrl", ['$scope', function($scope){




  $scope.textBoxGroups = [ {

      textBoxOne: { value: '' },
      textBoxTwo: { value: '' }

    } ];


   $scope.add = function(){
    $scope.textBoxGroups.push({

      textBoxOne: { value: '' },
      textBoxTwo: { value: '' }

    });
  }

  $scope.remove = function($index){

    // just pass in the $index of the element you want to remove
    // and splice it out

    $scope.textBoxGroups.splice($index, 1);

  } 

  $scope.doSomething = function(){

    $scope.processedData = [];
    $scope.charCount = 0;

    angular.forEach($scope.textBoxGroups, function(textBoxGroup){
      $scope.processedData.push({
        original: textBoxGroup.textBoxOne.value,
        updated: textBoxGroup.textBoxOne.value.toUpperCase()
      });

      $scope.charCount += textBoxGroup.textBoxOne.value.length;
    });



  }

}]);

</script>

</body>

</html>

【讨论】：

正是先生..这是我需要的相同输出
但我需要使用函数，我想在函数中发送文本框值，然后我必须对每一行值执行一些操作，然后我必须将结果保存在数组索引中，如 my_array(" sum1","sum2","sum3");
为什么需要这个功能。 textBoxGroup 变量中有同步值。你是什么意思'发送值'将它们发送到哪里？只需遍历模型，对每个元素执行所需的任何工作，然后将任何结果放入新数组中。要显示新数组，只需将其定义为 $scope 上的属性，您可以在模板中访问它。
实际上正在做一个复杂的项目（对我来说很复杂）。如果您不介意在摘要块的此页面中发布该网站链接getbannerman.com/book-security，则显示每个框的日期和时间计算...这样的事情是我的工作需要
我已经更新了答案，以展示一种可以在模型上执行其他过程的方法。如果您觉得答案对您有所帮助，请考虑对其进行投票或接受它作为答案。谢谢