Question

我有一个使用ng-bind-html显示变量的简单设置。但是现在必需品已经改变了，而且我要显示来自一个集合，需要显示一个寻呼机。所以我想到了使用一个函数I，认为它很容易，但却很失败。

预期的工作流程：

通过AJAX我加载选择字段（工作）的内容
当用户选择其中一个选项时，应该调用该函数来绘制分配给所选选项的集合中的内容，包括在集合中导航的寻呼机（不工作）。

到目前为止我所拥有的：

{% extends 'BDAMainBundle::layout.html.twig' %}
{% block title %}Kurs-Auswahl{% endblock %}
{% block body %}
  <div data-ng-controller="SingleCourseDownloadCtrl">
    <div class="row">
      <div class="col-xs-8">
        {{ textSnippet('snippet.solo_download_selection')|raw }}

        <div data-ng-show="loading">
          <span class="inline-ajax-indicator"></span>
        </div>

        <div data-ng-hide="loading || courses.length == 0" class="input-group">
      <select
        class="form-control"
        data-ng-change="tcAccepted = false"
        data-ng-model="course"
        data-ng-options="c|courseSelectionCourseLabel for c in courses"
      ><option value="">Bitte wählen:</option></select>

      ....

    <div data-ng-show="course">
      <div>
        {% verbatim %}
          {{ paged_weekly_exercises }}
        {% endverbatim %}
      </div>
    </div>
  </div>
  ....
{% endblock %}

和：

app.controller('SingleCourseDownloadCtrl', ['$scope', '$window', 'CourseManager', 'RemoteRouteConfig', function ($scope, $window, CourseManager, RemoteRouteConfig) {
  $scope.courses = [];
  $scope.loading = true;
  $scope.paged_weekly_exercise;
  $scope.course = [];

// load
CourseManager.getAvailableForSoloDownload().then(function (response) {
  $scope.courses = response;
  $scope.loading = false;

  $scope.$watch('course', function(){
    if(!course.length){
      return false;
    }
    $scope.paged_weekly_exercise = $scope.course.weekly_exercises[0].content;
  });
});

// starts the given course for single download
$scope.startCourse = function startCourse(course) {
  $window.location = RemoteRouteConfig.course.startSoloDownload({
    course: course.id
  });
 }; 
}]);

但我觉得我走错了路。我应该如何实现目标？

我对Angular的经验很少，但在Javascipt和JQuery方面相当不错。

Answer 1

不要在控制器中添加观察程序，只需使用ng-change：

<select
    class="form-control"
    data-ng-change="courseChanged()"
    data-ng-model="course"
    data-ng-options="c|courseSelectionCourseLabel for c in courses"

在您的控制器中：

$scope.courseChanged = function() {
    $scope.tcAccepted = false;

    var course = $scope.course; // the used ng-model
    if(!course.length){
        return;
    }

    $scope.paged_weekly_exercise = course.weekly_exercises[0].content;
}

AngularJs - 绑定功能

1 个答案: