在负载Angularjs上从控制器初始化所有ng-model

时间:2016-06-30 11:04:53

标签: javascript angularjs json angularjs-scope angular-ngmodel

我遇到了一个问题,我想要将所有 ng-models 声明为ng-model="a['keyX']初始化它们为{{1在用户开始提供输入之前..

由于某些原因,我无法使用0

我尝试将ng-value放入我的$scope.a函数中。它返回一个空的json对象。

我甚至尝试使用initializeToZero(),但运气不好。

我得到的只是一个空的json对象。

有什么办法可以在控制器中初始化它们而不管输入和按键的数量是多少?

密钥的名称会有所不同......我只是在这里提供了通用的密钥名称......所以请确保你不要硬编码。

我已经提到$scope.$apply()代码段,但我使用的是ng-controller

ui.router
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
  

    initializeToZero();

    function initializeToZero() {
      if (!$scope.$$phase) {
        $scope.$apply();
        console.log($scope.a);
      } else {
        
        setTimeout(initializeToZero, 1000);
      }
    }



  });

5 个答案:

答案 0 :(得分:2)

首先,使用a.key1而不是['key1']是一个好习惯。其次,如果要为所有值分配零,则使用控制器开头的map函数:

$ scope.a.map(function(item){return'0';});

这将返回a,所有项目都设置为零。

答案 1 :(得分:1)

在显示输入字段之前,您需要确保已加载数据:

HTML:
<div ng-app="myApp" ng-controller="myCtrl" data-ng-init="getValues()">
 <div ng-show="dataLoaded">
  <input type="number" ng-model="a['key1']">
  <input type="number" ng-model="a['key2']">
  <input type="number" ng-model="a['key3']">
  <input type="number" ng-model="a['key4']">
  <input type="number" ng-model="a['key5']">
  <input type="number" ng-model="a['key6']">
  <input type="number" ng-model="a['key7']">
  <input type="number" ng-model="a['key8']">
 </div>
</div>


IN YOUR CONTROLLER:
$scope.getValues= function () {
 // Do your initialization here
 // For example:
 angular.forEach($scope.a, function(key, value){
  $scope.a[key] = 0;
 })
 // Set dataLoaded to true
 $scope.dataLoaded = true;
}

CODEPEN:http://codepen.io/giannidk/pen/KrmgNL?editors=1011

答案 2 :(得分:1)

最后破解了......必须要做一些肮脏的编码..但是好吧..这里是代码..

function application(){
        $('input[ng-model^="a"]').each(function(){
            $(this).val(0);
        }); 
}

$scope.initializeToZero = function(){
    console.log("Called initializeToZero");
    if(!$scope.$$phase)
    {
        $scope.$apply(application);
        console.log("Applied");
    }
    else{
        console.log("REDOING");
        setTimeout($scope.initializeToZero,1000);
    }

}    
$scope.initializeToZero();

答案 3 :(得分:0)

您应首先定义函数initializeToZero

JS:

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $parse) {

    $scope.a = {};

    $scope.initializeToZero = function() {
     var temp = "key";
     for(var i = 0; i < 8; i++){
     var count = i + 1;
     var model = temp + count;
     var result = $parse(model);
     result.assign($scope.a, 0);
     console.log($scope.a);
 } 
}   

      $scope.initializeToZero();         

  });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="a.key1">
  <input type="number" ng-model="a.key2">
  <input type="number" ng-model="a.key3">
  <input type="number" ng-model="a.key4">
  <input type="number" ng-model="a.key5">
  <input type="number" ng-model="a.key6">
  <input type="number" ng-model="a.key7">
  <input type="number" ng-model="a.key8">


</div>

答案 4 :(得分:0)

编辑:一种黑客的方式,但我想它会完成工作。

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="a['key1']">
  <input type="number" ng-model="a['key2']">
  <input type="number" ng-model="a['key3']">
  <input type="number" ng-model="a['some']">
  <input type="number" ng-model="a['other']">
  <input type="number" ng-model="a['keys']">
</div>

JS:

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  var inputs = document.getElementsByTagName('input');
  $scope.a = {};
  for (var i=0; i<inputs.length; i++) {
    $scope.a[inputs[i].getAttribute('ng-model').replace(/^a\[\'(.*)\'\]$/, '$1')] = 0;
  }
});

jsFiddle