javascript - 附加到 Angular.js 中模型的复选框

Question

我有一个模型，它将与许多其他模型相关。例如，考虑一个堆栈溢出问题，它是一个与标签相关的问题。在 POST 或 PUT 之前，最终的对象可能如下所示:

{
  id: 28329332,
  title: "checkboxes that append to a model in Angular.js",
  tags: [{
    id: 5678,
    name: "angularjs"
  }, {
    id: 890,
    name: "JavaScript"
  }]
}

到目前为止，我有以下 Controller :

.controller('CreateQuestionCtrl',
    function($scope, $location, Question, Tag) {
      $scope.question = new Question();
      $scope.page = 1;
      $scope.getTags = function() {
        Tag.query({ page: $scope.page }, function(data) {
          $scope.tags = data;
        }, function(err) {
          // to do, error when they try to use a page that doesn't exist
        })
      };
      $scope.create = function() {
        $scope.question.$save(function(data) {
          $location.path("/question/" + data.id);
        });
      };
      $scope.$watch($scope.page, $scope.getTags);
    }
  )

因此，我在页面上显示所有已分页的标签。我希望他们能够选择给定的标签并将其附加到我的模型中，以便可以保存它。

如何创建一个复选框界面，用所选的其他模型更新 $scope.question？

<小时/>

编辑:我想我可能是其中的一部分

<div class="checkbox" ng-repeat="tag in tags.objects">
  <label><input
    type="checkbox"
    ng-change="setTag(tag.id)"
    ng-model="tag"
  >&nbsp;{{ tag.name }}
</div>

然后在 Controller 上

$scope.setTag = function(id) {
  Tag.get({id: id}, function(data) {
    // don't know what now
  })
}

Answer 1

基本上，需要一个指令来实现你的目标Take a look at the plunker I wrote for you 。正如您所看到的，在选定标签的列表中，显示了每个标签的 text 属性，这意味着对象结构被保留。在您的情况下，您可以将 $scope.question.tags 数组绑定(bind)为 collection 属性，并将 $scope.tags 中的每个标签绑定(bind)为element 属性。