复选框输入返回布尔值AngularJS

我有以下的HTML标记：复选框输入返回布尔值AngularJS

 <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

任何帮助，这将是巨大的，谢谢。

来源

2016-03-08 Nick Maddren

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

来源

2016-08-05 09:02:16

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

但是，如果您确实想要支持同时选择多个类别，我会推荐这种方法。

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

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

来源

2016-03-08 15:01:22 mkalish

您可以使用 “选择” 控制，而不是复选框。

例如：

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

，你将有你的“类别”填入为您的对象的字符串。

来源

2016-03-08 18:49:55

如果您正在使用布尔变量的复选框绑定请参考下面的例子：

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

来源

2018-01-11 07:30:14

复选框输入返回布尔值AngularJS

回答

相关问题