Question

制作一个程序，我需要使用角度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>

Answer 1

我不知道您在test()功能中想要实现的目标，但如果您只是想显示您当时模型的内容，那么似乎不需要为此创建一个函数：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>

angular js：函数在单独的块中返回的数组值

1 个答案: