Question

好的，我有一个问题，我现在开始拔头发了。基本上我正在创建一个使用角度和离子的应用程序，它具有多种不同的公式。所以我有1-6个输入字段和1-4个解决方案字段。最初我的计划是创建一个服务，为我创建html，然后我的控制器可以将它注入到html模板中。但是这需要使用$ compile并且我已经读过控制器永远不应该创建html而只是修改。

所以我能找到的唯一选择是使用ng-repeat来创建每个输入字段的最后一个。这个方法应该很好用，因为它可以让我通过简单地设置控制器内的范围来创建整个页面。不错，干净又高效。但生活并非如此简单。

我最大的问题似乎是设置ng-model和ng-change事件。最初我的HTML与此类似：

<div class="row"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">Length (feet):</span>
         <input type="number" id="variable1" ng-model="variable1" ng-change="calcExcavation();"  />
        </label>
      </div></div><!--End class col-90 and class row-->

      <div class="row"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">Width (feet):</span>
         <input type="number" id="variable2" ng-model="variable2" ng-change="calcExcavation();">
        </label>
      </div></div><!--End class col-90 and class row-->

      <div class="row"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">Depth (inches):</span>
         <input type="number" id="variable3" ng-model="variable3" ng-change="calcExcavation();">
        </label>
      </div></div><!--End class col-90 and class row-->

但是这需要为每个公式创建一个单独的html页面，所以我想使用通用模板和ng-repeat。这让我：

<div class="row" ng-repeat="x in variableArray"><div class="col col-10"></div><div class="col col-90">
    <label class="item item-input">
     <span class="input-label">{{x.label}}</span>
     <input type="number" id="{{x.name}}" ng-model="{{x.name}}" ng-change="{{x.onChangeFunction}}"  />
    </label>
  </div></div><!--End class col-90 and class row-->

但是当ng-model使用双卷曲x.name时，它不会重复这些字段。因此，在搜索其他示例时，我发现ng模型不需要花括号而只需要x.name。所以我试了一下，而不是它正确重复！因此，为了确保我的值正确传递，我创建了一个显示值的警报。打了5，它立即提醒我改变并告诉我价值。所以我没有进入下一个领域。因此，我认为我做错了什么，我在警报显示我的变量之前发出了一个简单的警报。这是我发现的。

更改第一个字段中的值将显示简单警报和显示我刚刚输入的值的数字警报。但是当我更改第二个字段的数字时，会显示简单警报，但数字警报根本就没有!!

我很近，我可以品尝它，请告诉我我做错了什么？

 .controller('ExcavationCtrl', function($scope, $compile, Contractor, FormBuilder) {

  $scope.viewTitle = "Contractors Calc";
  $scope.formulaName = "Excavation";
  $scope.formulaImageSquare = "./img/excavatorSquare.png";
  $scope.formulaDescription = "This program estimates the quantity of cubic yards that will have to be removed to provide an excavation of a given size. The program asks for the length and width in feet, and the thickness in inches of the area to be excavated.";

  $scope.variableArray = [ 
    {name: 'variable1', label:'Length', units:'(feet)', onChangeFunction:'calcExcavation()'}, 
    {name: 'variable2', label:'Width', units:'(feet)', onChangeFunction:'calcExcavation()'}, 
    {name: 'variable3', label:'Thickness', units:'(inches)', onChangeFunction:'calcExcavation()'}
  ];


  //$scope.showResults('excavation');

  $scope.calcExcavation = function() {
    alert('Got inside calcExcation');
    alert('Got into calcExcation formula inside the ExcavationCtrl. Variable1: '+variable1.value+', '+variable2.value+', '+variable3.value);
    $scope.variable2 = 5;
    $scope.variable3 = 9;
    //document.getElementById('solution').innerHTML = Contractor.formulaExcavate(variable1.value, variable2.value, variable3.value);
  }//end scope calcExcavation
})

    <h3>Repeated</h3>
      <div class="row" ng-repeat="x in variableArray"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">{{x.label}}</span>
         <input type="number" id="{{x.name}}" ng-model="x.name" ng-change="{{x.onChangeFunction}}"  />
        </label>
      </div></div><!--End class col-90 and class row-->

使用ng-repeat

0 个答案: