在加载Angularjs时从控制器初始化所有ng-model

Question

我遇到了一个问题，我想在用户开始提供输入..

由于某些原因，我无法使用ng-value。

我试图让$scope.a 进入我的initializeToZero() 函数。它返回一个空的 json 对象。

我什至尝试过使用$scope.$apply()，但运气不好。

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

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

键的名称会完全不同...我只是在这里提供了通用的键名...所以请确保您没有对其进行硬编码。

我在 sn-p 中提到了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);
      }
    }



  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="a = {}">
  <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>

Answer 1

你应该先定义函数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>

Answer 2

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

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;
}

编解码器：http://codepen.io/giannidk/pen/KrmgNL?editors=1011

Answer 3

终于破解了...必须进行一些肮脏的编码..但是没关系..这是代码..

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();

Answer 4

编辑：有点老套，但我想它会完成工作。

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

Answer 5

首先，使用 a.key1 代替 a['key1'] 是一个好习惯。其次，如果你想给所有的 a 赋值为零，那么在你的控制器开始处使用 map 函数：

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

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