Angularjs 角度ng型号ng重复清除所有输入_Angularjs_Input_Ng Repeat

Angularjs 角度ng型号ng重复清除所有输入

angularjs input

Angularjs 角度ng型号ng重复清除所有输入,angularjs,input,ng-repeat,Angularjs,Input,Ng Repeat,为什么函数clear（）在下面的示例中不起作用 HTML： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script

为什么函数

clear（）

在下面的示例中不起作用

HTML：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="wrapper" ng-app="app" ng-controller="AppController">
    <div class="form-control" ng-repeat="n in [] | range:number">
      <input type="text" ng-model="newVar" />
      <span>{{newVar}}</span>
    </div>
    <!-- //form controll -->
    <input type="range" ng-model="number" max="9" />
    <label>Repeat input fields {{number}} times</label>
    <button ng-click="clear()">clear</button>
  </div>
</body>

</html>

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

app.controller('AppController', function($scope) {
    $scope.number = 5;
    $scope.newVar = 0;
    $scope.clear = function() {
        $scope.newVar ='';
    }
});//AppController

app.filter('range', function () {
  return function (input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  }; //filter range
});


{{newVar}}
重复输入字段{{number}}次
清楚的

控制器：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="wrapper" ng-app="app" ng-controller="AppController">
    <div class="form-control" ng-repeat="n in [] | range:number">
      <input type="text" ng-model="newVar" />
      <span>{{newVar}}</span>
    </div>
    <!-- //form controll -->
    <input type="range" ng-model="number" max="9" />
    <label>Repeat input fields {{number}} times</label>
    <button ng-click="clear()">clear</button>
  </div>
</body>

</html>

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

app.controller('AppController', function($scope) {
    $scope.number = 5;
    $scope.newVar = 0;
    $scope.clear = function() {
        $scope.newVar ='';
    }
});//AppController

app.filter('range', function () {
  return function (input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  }; //filter range
});

var-app=angular.module（'app'，[]）；
app.controller（'AppController'，函数（$scope）{
$scope.number=5；
$scope.newVar=0；
$scope.clear=函数（）{
$scope.newVar=''；
}
});//应用控制器
应用过滤器（'范围'，函数（）{
返回函数（输入，总计）{
总计=parseInt（总计）；
对于（变量i=0；i


这是我的
当您手动更新文本框值时，它实际上在childScope中设置了newVar
值（由ng repeat指令创建），因此，不要将其绑定到newVar，而尝试将该值绑定到$parent.newVar
，这样会很好地工作
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="wrapper" ng-app="app" ng-controller="AppController">
    <div class="form-control" ng-repeat="n in [] | range:number">
      <input type="text" ng-model="$parent.newVar" />
      <span>{{newVar}}</span>
    </div>
    <!-- //form controll -->
    <input type="range" ng-model="number" max="9" />
    <label>Repeat input fields {{number}} times</label>
    <button ng-click="clear()">clear</button>
  </div>
</body>

</html>


{{newVar}}
重复输入字段{{number}}次
清楚的

是您的plunk
ng repeat
为每个“repeat”创建一个子作用域，因此您可以使用$parent
访问控制器的作用域。此外，可以使用数组/对象来存储所有值，而不是仅对视图中的所有不同行使用一个变量。您可以使用$index
内部ng repeat
执行此操作：
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="wrapper" ng-app="app" ng-controller="AppController">
    <div class="form-control" ng-repeat="n in [] | range:number">
      <input type="text" ng-model="$parent.newVar[$index]" />
      <span>{{newVar[$index]}}</span>
    </div>
    <!-- //form controll -->
    <input type="range" ng-model="number" max="9" />
    <label>Repeat input fields {{number}} times</label>
    <button ng-click="clear()">clear</button>
  </div>
</body>

</html>

clear（）的作用是什么？我可以看到clear（）正在删除所有输入值…是的，clear（）必须是从输入中删除所有值作为旁注，您将一个变量绑定到所有文本框，这样它将更新所有文本框和span标记的值。clear（）正在工作，但使用后它的作用域被破坏。所有输入类型相同data@andrzej这就是我在评论中提到的。谢谢！ng model=“$parent.newVar[$index]”这就是我所需要的