獲取ng-repeater中的日期選擇器的值

我在中繼器中有一個datepicker。現在我需要在插入函數中獲取datepicker的值。我試過的每件事都會導致'未定義'。處理這個問題的正確方法是什麼？獲取ng-repeater中的日期選擇器的值

<div ng-repeat="r in results | filter:searchText"> 
     <input class="input-datum sdate" ng-model="selecting.sdate" datepicker placeholder="datum van" /> 
     <input class="input-datum edate" ng-model="selecting.edate" placeholder="datum tot"/>   
     <img src="img/save.png" width="20px" class="icon" ng-click="insertTarief(selecting)"/> 
</div>

控制器：

var app = angular.module('DienstenApp', []); 

(function() { 
    app.controller('DienstenController', ['$scope', '$http', function ($scope, $http) { 
      var data = { 
       dienstenEdit: 'get', 
      }; 
      $http.post('ajax_crud.php', data). 
        success(function (data, status, headers, config) { 
         $scope.results = data; 
        }); 

      $scope.insertTarief = function (selectValue) { 
       console.log(selectValue); 
      }; 

     }]).directive('datepicker', function ($timeout) { 
    var linker = function ($scope, element, attrs, ngModelCtrl) { 
     $timeout(function() { 
      $(element).datepicker({ 
       minDate: 0, 
       dateFormat: 'dd-mm-yy', 
       onSelect: function (y, instance) { 
        var edate = element.siblings('.edate'); 
        edate.datepicker(); 
        edate.datepicker('option', 'minDate', element.datepicker("getDate")); 
       } 
      }); 
     }); 
    }; 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     transclude: true, 
     link: linker 
    };  
    }); 
})();

來源

2016-01-09 Daniel

如何綁定datepicker中的數據？ – Sajeetharan

目前尚不清楚你現在遇到的問題是什麼。我創建了一個[plunker]（http://plnkr.co/edit/XgnqUHyzNS6isbBdCxpS?p=preview）來嘗試重新創建你的問題（省略'$ http.post'調用），儘管'datepicker'指令被破壞，'insertTarief'按鈕肯定可以正常工作。 – Claies

我的第一個猜測是，這個'datepicker'指令是不對的，儘管我不能確定它應該做什麼。如果你的代碼不能像我創建的plunker一樣工作，你應該創建一個包含所有相關庫的完整示例來演示這個問題。 – Claies

當您使用的是NG重複裏面的 'selecting.sdate'，所有的日期選擇器指向相同的模型。可能你需要一個模型選擇數組.sdate [$ index]。

   Pass the 'selecting.sdate[$index]' from the view. Get the value in controller.

希望這有助於。

來源

2016-01-09 15:33:12

當我通過：ng-click =「insertTarief（選擇.sdate [$索引]）它仍然輸出未定義。$索引聽起來像邏輯雖然... – Daniel

嘗試這個

<div ng-repeat="r in results | filter:searchText track by $index"> 
     <input class="input-datum sdate" ng-model="selecting.sdate[$index]" datepicker placeholder="datum van" /> 
     <input class="input-datum edate" ng-model="selecting.edate[$index]" placeholder="datum tot"/>   
     <img src="img/save.png" width="20px" class="icon" ng-click="insertTarief($index)"/> 
</div>

和在控制器

$scope.insertTarief = function (index) { 
       console.log(selecting[index]); 
      };

來源

2016-01-09 15:35:37

這樣console.log（selectValue）;仍然輸出未定義。。 – Daniel

@Daniel您是否對HTML和JavaScript進行了更改？因爲在更新您的問題時，您只更改了JavaScript。 – Claies

等待我將更新您 –

-1

<div ng-repeat="r in results | filter:searchText"> 
    <input class="input-datum sdate" ng-model="selecting.sdate" datepicker placeholder="datum van" id="{{selecting.sdate}}"/> 
    <input class="input-datum edate" ng-model="selecting.edate" placeholder="datum tot"/>   
    <img src="img/save.png" width="20px" class="icon" ng-click="insertTarief(selecting)" id="{{selecting.edate}}"/>

添加id字段像上面。並像這樣訪問它var aa = $（'＃'+ foo.edate）.val（）;

來源

2016-01-09 17:13:08

這絕對不是角度的方式，而不應該是必要的在這種情況下。 – Claies

我有一個類似的概率.. jquery幫我修復它。 –

你可能已經找到了在角度上通過使用jQuery來解決問題，但angular的設計原則之一是不使用jQuery等其他庫。這是一個問題，*可以*使用角度解決，無需另一個庫。 – Claies

獲取ng-repeater中的日期選擇器的值

回答

相關問題