javascript - Angular JS 双向绑定(bind)不起作用

标签 javascript angularjs html angularjs-ng-repeat angularjs-ng-model

我无法在我的 Controller 中使用双向绑定(bind)。有一些奇怪的东西,但我不明白。我的数据结构是一个包含字符串数组的 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" 迭代日期数组,并使用 ng-model="date.date" 中的日期值> 像这样。

我的问题是范围变量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() 函数。您需要告诉 Angular 通过将函数体包装在 $scope.$apply(...) 中来更新绑定(bind):

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

您也可以将对 showSchedules 的调用包装在 $scope.$apply(...) 调用中。

关于javascript - Angular JS 双向绑定(bind)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29923286/

相关文章:

javascript - 在 Angular 中添加带有指令的元素

javascript - jquery .val() 返回未定义

javascript - JavaScript/HTML 解耦有什么值(value)吗?如果是这样怎么办?

permissions - AngularJS - 权限指令

Android 嵌入式 HTML5 视频

css - HTML 相对位置和高度问题。

javascript - div 中的 ng-repeat 不起作用

angularjs - 在 angular.ui 模态中注入(inject) Angular Controller 依赖项的正确方法

javascript - $state.go 不能在单个 Controller 中工作

javascript - 如何从容器中删除选定的图像