如何獲得$ index索引變量以角度工作？

我有我的HTML中的div編碼如下：

<div ng-repeat="loss in Model.plDetails track by $index"> 
<div class="col-sm-2"> 
    <div class="input-group"> 
     <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="loss.Date" id="loss-date{{$index+1}}" 
       datepicker-pattern="((0[13578]|1[02])[-/]31[-/](18|19|20)[0-9]{2})|((01|0[3-9]|1[1-2])[-/](29|30)[-/](18|19|20)[0-9]{2})|((0[1-9]|1[0-2])[-/](0[1-9]|1[0-9]|2[0-8])[-/](18|19|20)[0-9]{2})|((02)[-/]29[-/](((18|19|20)(04|08|[2468][048]|[13579][26]))|2000))" 
       is-open="datePicker{{$index+1}}.opened" max="maxDate" max-date="maxDate" date-format placeholder="MM/DD/YYYY"/> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open($event,'datePicker{{$index+1}}')"><i class="icon icon-calendar"></i></button> 
     </span> 
    </div> 
</div> 
<div class="col-sm-2"> 
    <input type="number" ng-model="loss.amount" placeholder="$ Amount" /> 
</div> 
<div class="col-sm-2"> 
    <select ng-model="loss.type" placeholder="Loss Type"> 
     <option value="0"></option> 
     <option value="2">Test</option> 
    </select> 
</div> 
<div class="col-sm-2"> 
    Add Line 
</div> 
</div>

「打開」功能在我的JavaScript編碼爲：

$scope.open = function ($event, targetDatePicker) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
    $scope[targetDatePicker].opened = !$scope[targetDatePicker].opened; 
}

的問題是，當我嘗試運行此代碼首先給出了一個錯誤：「語法錯誤：令牌'{'是表達式[datePicker {{$ index + 1}}。第11列開始]處的意外標記，以[{{$ index + 1 }}。打開。」這是定義了is-open的代碼行。

如果我將is-open更改爲datePicker1.opened，它的工作方式會越過錯誤（但從長遠來看對我的代碼不起作用，因爲我需要最後一位數字是可變的），但有另一個問題。當點擊日曆圖標觸發ng-click事件時，由於「targetDatePicker」被解釋爲datePicker {{$ index + 1}}，所以拋出了「未定義」的「無法讀取屬性」錯誤存在。

必須有讓他們出來爲DATEPICKER1，DATEPICKER2等，以評估這些值的方法...

更新：我也嘗試過的代碼在。我試圖建立的代碼爲：

  $scope.datePicker = {}; 
      $scope.open = function ($event, idx) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 
      $scope.datePicker['idx' + idx].opened = !$scope.datePicker['idx' + idx].opened; 
     };

隨着HTML作爲<input type="text" class="form-control ng-pristine ng-valid ng-isolate-scope ng-empty ng-valid-date ng-touched" datepicker-popup="MM/dd/yyyy" ng-model="loss.Date" id="loss-date1" datepicker-pattern="((0[13578]|1[02])[-/]31[-/](18|19|20)[0-9]{2})|((01|0[3-9]|1[1-2])[-/](29|30)[-/](18|19|20)[0-9]{2})|((0[1-9]|1[0-2])[-/](0[1-9]|1[0-9]|2[0-8])[-/](18|19|20)[0-9]{2})|((02)[-/]29[-/](((18|19|20)(04|08|[2468][048]|[13579][26]))|2000))" is-open="datePicker['idx'+$index].opened" max="maxDate" max-date="maxDate" date-format="" placeholder="MM/DD/YYYY">，但我仍然得到Cannot read property 'opened' of undefined錯誤。

來源

2016-02-02 SpaceCowboy74

你不應該在NG-點擊屬性，使用大括號，嘗試治療$指數更像JavaScript數字...'datePicker'+（$ index + 1） –

在我的第二次嘗試中，我完全刪除了datepicker，只是有''，仍然得到'無法讀取屬性'打開'undefined error'錯誤， – SpaceCowboy74

@ SpaceCowboy74你期待'datePicker {{$ index + 1} ''成爲一個對象？該對象如何或何處被初始化？你有沒有試過'is-open =「datePicker [$ index + 1] .opened」'？ –

第一個錯誤，你缺少的is-open屬性}，這將使角不能分析它，只是將文字，所以

is-open="datePicker{{$index+1}.opened"

改變它

is-open="datePicker{{$index+1}}.opened"

現在，在你的ng-click中，你不需要雙重的{{}}，angularjs不需要評估這個將字符串傳遞給函數，你只需要類似這樣的東西

ng-click="open($event,'datePicker'+($index+1))"

這會做到這一點。

我不知道你使用的日期選擇器是如何工作的，我只是指出了我在代碼中看到的錯誤。希望它可以幫助

EDITED
我已經寫了一個說明性的例子，只是給你看語法，也許你能找到一段代碼，可以幫助您解決問題。

<!DOCTYPE html> 
<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>.:[Angularjs test]:.</title> 
     <script type="text/javascript" src="jquery-1.10.2.js"></script> 
     <script type="text/javascript" src="angular.js"></script> 
     <script type="text/javascript"> 
     (function() { 
      'use strict'; 

      angular.module('kstr', []); 
      angular 
       .module('kstr') 
       .controller('KstrController', KstrController); 

      function KstrController(){ 
       var self = this; 
       self.myList = ["kstro", "jhon", "jane"]; 
       self.datePicker = {}; 

       self.printit = function(index){ 
        console.log(self.datePicker[index]); 
        self.datePicker[index].opened = !self.datePicker[index].opened; 
       } 
      } 
     })(); 
     </script> 
</head> 
<body data-ng-app="kstr"> 
    <div class="row" data-ng-controller="KstrController as kstr"> 
     <div data-ng-repeat="myItem in kstr.myList track by $index"> 
      <p>My item "{{myItem}}" with "datePicker{{$index+1}}"</p> 
      <div data-ng-init="kstr.datePicker[$index+1]={opened:false}"> 
       <pre>var datePicker[{{$index+1}}].opened = {{kstr.datePicker[$index+1].opened}}</pre> 
      </div> 
      <div> 
       <button type="button" data-ng-click="kstr.printit($index+1)">Change it</button> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-02-02 01:50:21

對不起，這是我的複製粘貼錯誤。我在原始代碼中使用了額外的大括號。這是「語法錯誤：令牌'{'是在[{{$ index + 1}}。開始]的表達式[datePicker {{$ index + 1}}。「錯誤。 – SpaceCowboy74

@ SpaceCowboy74看到我的編輯，希望它有幫助 –

所以我就是這樣解決它的。我最終將開放的目標移到了我的目標上，細節就是這樣。這是通過開放的功能傳遞的，現在似乎都行得通。

 $scope.Model.plDetails = [{ date: "", amount: "", opened: false, type: 1 }]; 
     $scope.open= function ($event, loss) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 
      loss.opened = !loss.opened; 
     }; 
     $scope.addLossItem = function() { 
      $scope.Model.plDetails.push({ date: "", amount: "", opened: false, type: 1 }); 
     }; 
     $scope.removeLossItemAt = function (itemToRemove) { 
      if ($scope.Model.plDetails.length === 1) 
       return; 
      $scope.Model.plDetails.splice($scope.Model.plDetails.indexOf(itemToRemove), 1); 
     };

我的HTML被設置爲：

 <div class="row" ng-if="Model.ApplicantLosses==0"> 
      <div class="col-xs-12"> 
       <div class="col-xs-12"> 
        <div class="form-group"> 
         <h4>Prior Loss Details</h4> 
         <div class="form-inline"> 
          <div ng-repeat="loss in Model.plDetails track by $index" style="margin-top: 10px"> 
           <div class="col-sm-1" style="width: 2%; margin-top: inherit;"> 
            <label id="{{$index+1}}">{{$index+1}}</label> 
           </div> 
           <div class="col-sm-2 form-group"> 
            <div class="input-group"> 
             <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="loss.Date" id="loss-date{{$index+1}}" 
               datepicker-pattern="((0[13578]|1[02])[-/]31[-/](18|19|20)[0-9]{2})|((01|0[3-9]|1[1-2])[-/](29|30)[-/](18|19|20)[0-9]{2})|((0[1-9]|1[0-2])[-/](0[1-9]|1[0-9]|2[0-8])[-/](18|19|20)[0-9]{2})|((02)[-/]29[-/](((18|19|20)(04|08|[2468][048]|[13579][26]))|2000))" 
               is-open="loss.opened" max="maxDate" max-date="maxDate" date-format placeholder="MM/DD/YYYY" /> 
             <span class="input-group-btn"> 
              <button type="button" class="btn btn-default" ng-click="open($event,loss)"><i class="icon icon-calendar"></i></button> 
             </span> 
            </div> 
           </div> 
           <div class="form-group col-sm-9"> 
            <div class="col-sm-3" style="display: inline-table"> 
             <input type="number" ng-model="loss.amount" placeholder="$ Amount" /> 
            </div> 
            <div class="col-sm-3" style="display: inline-table"> 
             <select id="loss-type{{$index+1}}" ng-model="loss.type" ng-options="lossType.idng-show as lossType.name for lossType in lossTypeParameters" class="form-control" required> 
              <option value="" disabled>Loss Type</option> 
             </select> 
            </div> 
            <div class="col-sm-3" style="display: inline-table"> 
             <span><a id="loss-del-item{{$index+1}}" ng-show="Model.plDetails.length > 1" style="vertical-align: middle" ng-click="removeLossItemAt(loss)"><i class="icon icon-minus-square-o icon-lg"></i>&nbsp;Remove Line</a></span> 
             <span ng-show="Model.plDetails.length != 2 && $index+1 == Model.plDetails.length"><a id="loss-add-item{{$index+1}}" ng-click="addLossItem()"><i class="icon icon-plus-square-o icon-lg"></i>&nbsp;Add Line</a></span> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>

來源

2016-02-02 19:33:30 SpaceCowboy74

如何獲得$ index索引變量以角度工作？

回答

相關問題