複選框輸入返回布爾值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

回答

相關問題