根据用户输入的值输入字段

时间:2016-10-23 11:14:04

标签: angularjs

我有div,里面有一些标记。基本上我想在提交时保存一些表单字段。

在这个div之外,我有一个输入字段,用户可以输入一个整数。根据这个整数,我想显示或ng-repeat项目。

这是与我的问题相匹配的示例代码。保持任何表单元素内的跨度,专注于ng-repeat的主要问题。



var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 3;

    $scope.getNumber = function(num) {
        return new Array(num);   
        $scope.$apply();
    }
    
    $scope.$watch('myNumber', function(newVal,OldVal){
    	$scope.myNumber = newVal;
      //alert(newVal);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="ctrlParent">
    <input type="text" ng-model="myNumber" ng-blur="getNumber(myNumber)"/>
        <ul>
            <li ng-repeat="i in getNumber(myNumber) track by $index">
              
              <span>{{$index+1}}</span>
            </li>
        </ul>
        
       
    </div>
</div>
&#13;
&#13;
&#13;

这是我尝试过的:

  1. 观察变量并将输入的newValue赋值给范围变量没有帮助。
  2. 我尝试使用ng-blur来调用具有更新值的相同函数。哦,是的,也尝试了ng-change。
  3. 在绝望中使用get $scope.$apply()以免手动更新更改。
  4. 我该如何处理?有没有办法更新ng-repeat?

2 个答案:

答案 0 :(得分:2)

这不是ng-repeat的问题,您使用了input type的{​​{1}}。 将其更改为text或使用number

答案 1 :(得分:0)

您无需使用ng-blur$watch$scope.$apply()来检测案例中的更改。

你错了这个部分:<input type="text" ng-model="myNumber">,你应该将输入更改为类型编号 new Array()接受号码并在其上传递文字。

var app = angular.module('myapp', []);
 app.controller('ctrlParent', function($scope) {
   $scope.myNumber = 3;

   $scope.getNumber = function(num) {
     return new Array(num);
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="ctrlParent">
    <input type="number" ng-model="myNumber" />
    <ul>
      <li ng-repeat="i in getNumber(myNumber) track by $index">
        <span>{{$index+1}}</span>
      </li>
    </ul>
  </div>
</div>