0

$scope 似乎与 Angularjs 中的更新不同步。

我使用 ui.bootstrap.timepicker 更新我的时间值（myst 和 myet），然后当我显示userscheds[index]using时alert(JSON.stringify($scope.userscheds[index]));，只显示原始值。我错过了什么？

任何帮助，将不胜感激

请参阅下面的我的plunker或代码

更新#1

来自@dgig 的评论以删除this.。ng-model="this.myst"变成ng-model="myst"

但是我的 $scope 仍然没有显示更新完成

html模态

<div class="container" ng-app="appUserSchedule">
<div ng-controller="CtrlUserSchedule" >

<div class="row">
      <ul>
        <li ng-repeat="x in userscheds">{{x.week_day}} {{x.time_start}}-{{x.time_end}}
            <span ng-click="ctrl.showModal($index)" style="cursor:pointer;">Edit</span>
            <span ng-click="ctrl.removeItem($index)" style="cursor:pointer;">Delete</span>
        </li>
      </ul>
</div>


<!-- Modal -->  
<script type="text/ng-template" id="modalContent.html">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
  <timepicker ng-model="myst" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
<div class="col-sm-6">
  <timepicker ng-model="myet" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="$close()">OK</button>
  <button class="btn btn-primary" ng-click="saveUserScheduleEntry()">Save</button>
</div>

js

var app = angular.module("appUserSchedule", ['ui.bootstrap']); 
app.controller("CtrlUserSchedule", function($scope,$http,$location,$modal) {

$scope.ctrl = this;

$http.get('userschedule.json').success(function(data, status, headers, config) {

    $scope.userscheds = data.userschedules;

    //console.log(data);
}).error(function(data, status, headers, config) {
    console.log("No data found..");
});


  // Show modal 
  this.showModal = function (index) {

  var modalInstance;

  modalInstance = $modal.open({
    templateUrl: 'modalContent.html',
    controller: 'CtrlUserSchedule',
    scope: $scope 
  });

  objts   = new Date($scope.userscheds[index].datetime_start);           
  objte   = new Date($scope.userscheds[index].datetime_end);       

  $scope.myst = objts;
  $scope.myet = objte;


      // Save User Schedule Entry details after making a change, then close modal    
      $scope.saveUserScheduleEntry = function() { 

      // Displays original value, but where are my updated values?
       alert(JSON.stringify($scope.userscheds[index]));

         $http.put('userschedule.json',index).success(function(eventsuccess){
       }).error(function(err){
           /* do something with errors */
       });

       modalInstance.close();
     };   

}

json

{
"userschedules":[
  {
     "id":1,
     "week_day":"Monday",
     "datetime_start":"2016-03-08T08:00:00-05:00",
     "datetime_end":"2016-03-08T12:00:00-05:00",
     "time_start":"08:00",
     "time_end":"12:00"
  },
  {
     "id":21,
     "week_day":"Monday",
     "datetime_start":"2016-03-08T13:00:00-05:00",
     "datetime_end":"2016-03-08T17:00:00-05:00",
     "time_start":"13:00",
     "time_end":"17:00"
  }, ...
4

0 回答 0