复选框输入在放置在视图模型 AngularJS 中时返回布尔值

Question

我有以下HTML标记：

        <div class="blog-admin-article-sidebar-item-content">
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="Volkswagen">Volkswagen</label>
          </div>
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="SEAT">SEAT</label>
          </div>
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="SKODA">SKODA</label>
          </div>
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="Pulman Group">Pulman Group</label>
          </div>
        </div>

如您所见，我的输入复选框具有自定义值，例如Volkswagen。

出于某种原因，我似乎在选择复选框并将值放在我的view model中时遇到了问题。

这是我的控制器的示例：

(function(){
  'use strict';
  angular
    .module('app.admin')
    .controller('AdminController', AdminController);
    AdminController.$inject = ['$firebaseArray'];
    function AdminController($firebaseArray) {
      var vm = this;
      var fireArticles = new Firebase('XXX');
      function Article() {
        this.name = '';
        this.content = '';
        this.category = '';
        this.published = false;
      }
      vm.newArticle = new Article();
      vm.articles = $firebaseArray(fireArticles);
      vm.addArticle = addArticle;
      function addArticle() {
        vm.articles.$add(vm.newArticle);
      }
    }
})();

如您所见，我正在声明名为vm的视图模型。

我很困惑为什么复选框值作为布尔值放置在我的 vm.newArticle.category 中，而不是分配给复选框的值？

我的视图模型当前正在输出：

"category":true

对此的任何帮助都会很棒，谢谢。

Answer 1

根据您的用例，复选框似乎是错误的控件，因为 article.category 只能有一个值，而复选框将允许多个选择。 在这种情况下，我建议使用单选按钮示例

但是，如果您确实想支持同时选择多个类别，我建议您使用此方法。

function Article() {
  this.name = '';
  this.content = '';
  this.category = {
    skoda: false,
    seat: false,
    Volkswagen: false
  }
}

一个网页： <input ng-model="vm.newArticle.category.skoda"type="checkbox">SKODA</label>

Answer 2

如果在选中和取消选中复选框时必须绑定某些值，请使用 ng-true-value="someValue"和ng-false-value="someValue" .

Answer 3

您可以使用"选择"控件而不是复选框。

例如：

<select ng-model="vm.newArticle.category" required>
     <option value="Volkswagen">Volkswagen</option>
     <option value="SEAT">SEAT</option>
     <option value="SKODA">SKODA</option>
</select>

您将在对象中将"类别"填充为字符串。

Answer 4

如果您使用布尔变量绑定复选框，请参考以下示例：

  <div ng-repeat="book in books">
  <input type="checkbox"   ng-model="book.selected"  ng-
  click="function(sample)">
  </div>