Question

我有一个复选框列表...当检查其中任何一个时，我希望它们在我使用{{}}的区域打印...如果没有选中，那么我希望它没有视觉效果表示那里有什么......在这里查看我的沙箱http://plnkr.co/edit/lvkdCmg7dQabuRKsBT5A?p=preview

                            <!doctype html>
            <html ng-app>
            <head>
              <meta charset="utf-8">
              <title>AngularJS Multiple Checkboxes</title>
              <style>
                label {display: block;}
              </style>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
            </head>

            <body>
              <div class="col-sm-7">
                  <input type="checkbox" ng-model="fali">
                  fa-li
                  <br>
                  <input type="checkbox" ng-model="falg">
                  fa-lg
                  <br>
                  <input type="checkbox" ng-model="fa2x">
                  fa-2x
                  <br>
                  <input type="checkbox" ng-model="fa3x">
                  fa-3x
                  <br>
                  <input type="checkbox" ng-model="fa4x">
                  fa-4x
                  <br>
                  <input type="checkbox" ng-model="fa5x">
                  fa-5x
                  <br>
                  <input type="checkbox" ng-model="spin">
                  fa-spin
                </div>
                <div class="col sm-4">
                  <xmp class="prettyprint">
                   <i class="fa {{fali}} {{falg}} {{fa2x}} {{fa3x}} {{fa4x}} {{fa5x}} {{spin}}"></i>
                  </xmp>
                </div>

              <script>

              </script>
            </body>
            </html>

它目前有效，但它显示的是真/假而不是值，并且在非检查项目的字符串中有空格

Answer 1

在复选框元素上使用ng-true-value="your value"和ng-false-value="your value"，将true和false之外的值设置为复选框。要最初显示文字，请将模型设置为false。

Plunkr：http://plnkr.co/edit/V4IA9uUS4feDXcXC4BMk?p=preview

Answer 2

使用ng-true-value和ng-false-value指定所需的值。否则，该值为true或false。

<input type="checkbox" ng-true-value="fa-li" ng-false-value="" ng-model="fali">
      fa-li

更新了plnkr：http://plnkr.co/edit/8BxnlsrvIhPmrGup7UaV?p=preview

角度打印选中一个区域的框

2 个答案: