Question

我有4个复选框广告，他们应该像复选框一样，但他们没有。我只能选一个。有人可以帮我解决我的问题吗？

我的第二个问题是，它们是否可能从一开始就被选中？

谢谢！

我认为我错误地描述了我的问题，我可以点击两个复选框，但之后什么都没有显示。

例如：如果我点击绿色和红色，则应显示两种颜色。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group"> 
    <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack"/>&nbsp;
    <label for="stat1">black</label><br />
    <input type="checkbox" id="stat2" ng-true-value="'red'" ng-model="statusred"/>&nbsp;
    <label for="stat2">red</label><br />                               
    <input type="checkbox" id="stat3" ng-true-value="'yellow'" ng-model="statusyellow"/>&nbsp;
    <label for="stat3">yellowt</label><br />   
    <input type="checkbox" id="stat4" ng-true-value="'green'" ng-model="statusgreen"/>&nbsp;
    <label for="stat4">green</label><br />                     
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Number</th>
            <th>Color</th>
            <th>Info</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="co in $ctrl.colors | filter:statusred | filter:statusblack | filter:statusgreen | filter:statusyellow">
            <td>{{ co.no }}</td>
            <td>{{ co.color }}</td>
            <td>{{ co.info }}</td>
        </tr>
    </tbody>
  </table>

Answer 1

添加选中的输入标记

<div class="form-group"> 
    <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack"/>&nbsp;
    <label for="stat1">black</label><br />
    <input type="checkbox" id="stat2" ng-true-value="'red'" ng-model="statusred"/>&nbsp;
    <label for="stat2">red</label><br />                               
    <input type="checkbox" id="stat3" ng-true-value="'yellow'" ng-model="statusyellow"/>&nbsp;
    <label for="stat3">yellowt</label><br />   
    <input type="checkbox" id="stat4" ng-true-value="'green'" ng-model="statusgreen" checked/>&nbsp;
    <label for="stat4">green</label><br />                     
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Number</th>
            <th>Color</th>
            <th>Info</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="co in $ctrl.colors | filter:statusred | filter:statusblack | filter:statusgreen | filter:statusyellow">
            <td>{{ co.no }}</td>
            <td>{{ co.color }}</td>
            <td>{{ co.info }}</td>
        </tr>
    </tbody>
  </table>

Answer 2

根据您提供的代码示例，它们就像复选框一样。关于第二个问题，您可以使用ng-checked="true"选中复选框最初

演示

angular.module("app",[])
.controller("ctrl",function($scope){


})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="form-group"> 
    <input type="checkbox" id="stat1" ng-true-value="'black'"  ng-model="statusblack" ng-checked="true"/>&nbsp;
    <label for="stat1">black</label><br /> 
    <input type="checkbox" id="stat2" ng-true-value="'red'" ng-model="statusred" ng-checked="true"/>&nbsp;
    <label for="stat2">red</label><br />                               
    <input type="checkbox" id="stat3" ng-true-value="'yellow'" ng-model="statusyellow" ng-checked="true"/>&nbsp;
    <label for="stat3">yellowt</label><br />   
    <input type="checkbox" id="stat4" ng-true-value="'green'" ng-model="statusgreen" ng-checked="true"/>&nbsp;
    <label for="stat4">green</label><br />                     
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Number</th>
            <th>Color</th>
            <th>Info</th>
        </tr>
    </thead>
    <tbody> 
        <tr ng-repeat="co in $ctrl.colors | filter:statusred | filter:statusblack | filter:statusgreen | filter:statusyellow">
            <td>{{ co.no }}</td>
            <td>{{ co.color }}</td>
            <td>{{ co.info }}</td>
        </tr>
    </tbody>
  </table>
  
</div>

Answer 3

可以选中所有复选框。

第二个问题：

如果您想从页面开头选择它，只需输入 checked =＆＃34; true＆＃34;

示例：

// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!'); 
  // We just got a connection but we need to wait briefly
   // before we determine the connection type.  Might need to wait 
  // prior to doing any api requests as well.
  setTimeout(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

Answer 4

如前所述，代码确实有效。

关于默认选中它，您需要在输入标记的末尾添加checked。

E.g。 <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack" checked/>

有关详细信息，请参阅W3Schools。

复选框的行为类似于Radiobutton

4 个答案: