如何在Angular app中取消选择单选按钮？

Question

我的Plunker：http://plnkr.co/edit/1lof9pSiTHmIMTq8qHuU?p=preview

这是我的无线电输入列表：

<ul>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('client')" value="client">Client<div class="fr">10</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('competitor-name')" value="competitor-name">Competitor Name<div class="fr">25</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('company-name')" value="company-name">Company Name<div class="fr">16</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('government')" value="government">Government<div class="fr">111</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('events')" value="events">Events<div class="fr">97</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('industry')" value="industry">Industry<div class="fr">10</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('people')" value="people">People<div class="fr">18</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('philanthropic')" value="philanthropic">Philanthropic<div class="fr">5</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('products')" value="products">Products<div class="fr">4</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('product-category')" value="product-category">Product (Category)<div class="fr">26</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('product-feature')" value="product-feature">Product (Feature)<div class="fr">13</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('place')" value="place">Place<div class="fr">434</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('problem')" value="problem">Problem<div class="fr">53</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('news')" value="news">News<div class="fr">33</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('related-company-name')" value="related-company-name">Related Company Name <div class="fr">88</div></li>
  <li name="cat-radio" ng-cloak><input type="radio" ng-model="check" ng-change="onSort('trend')" value="trend">Trend<div class="fr">2</div></li>
</ul>

我的取消选择所有ng-click功能：

$scope.deselectAll = function() {
    vs.catBrand       = false,
    vs.catClient      = false,
    vs.catCompetitor  = false,
    vs.catCompName    = false,
    vs.catGov         = false,
    vs.catEvents      = false,
    vs.catIndustry    = false,
    vs.catPeople      = false,
    vs.catPhil        = false,
    vs.catProducts    = false,
    vs.catProductCat  = false,
    vs.catProductFeat = false,
    vs.catPlace       = false,
    vs.catProblem     = false,
    vs.catNews        = false,
    vs.catRelatedCo   = false,
    vs.catTrend       = false;

    var ele = document.getElementsByName("cat-radio");

    for(var i=0;i<ele.length;i++) {
        ele[i].checked = false;
    }
}

Answer 1

只需将$ scope.check = false添加到您的方法deselectAll它将开始工作

$scope.deselectAll = function() {
vs.catBrand       = false,
vs.catClient      = false,
vs.catCompetitor  = false,
vs.catCompName    = false,
vs.catGov         = false,
vs.catEvents      = false,
vs.catIndustry    = false,
vs.catPeople      = false,
vs.catPhil        = false,
vs.catProducts    = false,
vs.catProductCat  = false,
vs.catProductFeat = false,
vs.catPlace       = false,
vs.catProblem     = false,
vs.catNews        = false,
vs.catRelatedCo   = false,
vs.catTrend       = false;
$scope.check=false;

var ele = document.getElementsByName("cat-radio");

for(var i=0;i<ele.length;i++) {
    ele[i].checked = false;
}