簡體   English   中英

Angular JS雙向綁定不起作用

[英]Angular JS two-way-binding doesn't work

我無法在控制器中使用雙向綁定。 有一些奇怪的東西,但我不明白。 我的數據結構是一個包含字符串數組的JavaScript對象。

$scope.schedule = {
    schedule_name: "Test 123",
    schedule_id: 1234,
    dates: [{
        date: "2015-01-01"
    }, {
        date: "2015-02-01"
    }, {...}]
}

我從數據庫中檢索計划,並將其放置在UI中的列表中。 $scope.scheduleList的元素是可單擊的。 如果用戶單擊計划元素,則它將顯示在屏幕上,其中包含計划對象的所有屬性。

我使用ng-repeat="date in schedule.dates"的date遍歷dates數組,並使用ng-model="date.date"的date-value這樣。

我的問題是范圍變量schedule不會在任何更改上進行更新。 這是我的代碼的摘錄:

 $scope.scheduleList = []; CommonDataService.get(URL).then(function(data) { for (var i = 0; i < data.length; i++) { data[i].dates.forEach(function(value, key) { data[i].dates[key] = {date: $filter("date")(value, "EEE, dd.MM.yyyy")}; }); data[i].schedule_name = data[i].schedule_name.substr(4); } $scope.scheduleList = data; }); $scope.schedule = {}; $scope.showSchedules = function(schedule) { $scope.schedule = schedule; } ... $scope.save = function() { console.log($scope.schedules); //CommonDataService.add(URL, $scope.schedules).then(function(response) { // console.log(response); //}); }; 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> <body data-ng-app="rwk"> ... <div class="form-group col-lg-6" data-ng-repeat="date in schedule.dates track by $index" data-ng-if="key !== 'schedule_id' && key !== 'schedule_name'"> <div class="col-lg-9"> <p class="input-group pull-left"> <input data-rwk-datepicker data-format="D, dd.mm.yyyy" id="{{$index}}" type="text" class="form-control" data-ng-model="date.date" data-ng-required="true" /> </p> </div> </div> </body> 

如果有人可以幫助我,我很幸運! 提前致謝!

您可能是從超出angular范圍的范圍調用showSchedules()函數。 您需要通過將函數主體包裝在$scope.$apply(...)來告訴angular更新綁定$scope.$apply(...)

$scope.schedule = {};
$scope.showSchedules = function(schedule) {
    $scope.$apply(
        $scope.schedule = schedule;
    );
}

您也可以showSchedules的調用showSchedules$scope.$apply(...)調用中。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM