Question

这是我的图像样本。

以下是代码的plunker视图。 https://plnkr.co/edit/ap4p6yGy5gQKc3XuP45f?p=preview

如果 选中并提交了 ，我如何使用angular来显示值？我正在为UI使用百万美元框架。

HTML代码

<div>
    <form>
        <h3> Values to be displayed</h3>
        <ul>
            <li>
                <input id="features1" name="features" type="checkbox"/>
                <input name="_features" type="hidden" value="on"/>
                <label for="features1">account</label>
            </li>
            <li>
                <input id="features2" name="features" type="checkbox" value=""/>
                <input name="_features" type="hidden" value="on"/>
                <label for="features2">bootfile</label>
            </li>
            <li>
                <input id="features3" name="features" type="checkbox" value=""/>
                <input name="_features" type="hidden" value="on"/>
                <label for="features3">cmts</label>
            </li>
            <li>
                <input id="features19" name="features" type="checkbox" value=""/>
                <input name="_features" type="hidden" value="on"/>
                <label for="features19">info_transaction_time</label>
            </li>
            <li>
                <input id="features20" name="features" type="checkbox" value=""/>
                <input name="_features" type="hidden" value="on"/>
                <label for="features20">node</label>
            </li>
            <li>
                <input id="features21" name="features" type="checkbox" value=""/>
                <input name="_features" type="hidden" value="on"/>
                <label for="features21">state</label>
            </li>
        </ul>
        <input type="submit" value="Submit"/> <input type="reset" value="Reset"/>
    </form>
</div>

HTML code cont

<div>
    <table th:each="info : ${info}" style="width:100%">
        <tr>
            <td>account</td>
            <td th:text="${info.account}"></td>
        </tr>
        <tr>
            <td>bootfile</td>
            <td th:text="${info.bootfile}"></td>
        </tr>
        <tr>
            <td>cmts</td>
            <td th:text="${info.cmts}"></td>
        </tr>
        <tr>
            <td>info_transaction_time</td>
            <td th:text="${info.info_transaction_time}"></td>
        </tr>
        <tr>
            <td>node</td>
            <td th:text="${info.node}"></td>
        </tr>
        <tr>
            <td>billing_state</td>
            <td th:text="${info.state}"></td>
        </tr>
    </table>
</div>

正如您所看到的，显示我的值的代码位于不同的div标记中，因此我无法使用angular js提供的内联显示/隐藏方法。

示例：

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"/>

<div class="form-group" ng-show="ModelData.Animals">

    <label for="FirstName" class="col-md-9">
        Are you interested in Animal Liability Coverage?
    </label>

    <div style="background-color: white; position: absolute; top: 100px;left: 150px;" class="col-md-6">

        <label>
            <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio"
                   ng-model="ModelData.AnimalLiabCov" value="Y"/>
            Yes
            <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio"
                   ng-model="ModelData.AnimalLiabCov" value="N"/>
            No
        </label>

    </div>
</div>

上面的代码有效，因为它在同一个div标记内。但是我的标签是单独的div标签。我该怎么办？

Answer 1

您可以在多个div或ng-show="yourVariable"标记中使用<tr>。

在您的HTML中：

<input id="features1" name="features" type="checkbox" ng-model="accountChecked" />

<input type="submit" value="Submit" ng-click="yourFunction()"/>

和

<tr ng-show="yourVariable">
        <td >account</td>
        <td th:text="${info.account}"></td>
</tr>

在您的控制器中：

$scope.yourFunction = function ()
{
    if ($scope.accountChecked) {
        $scope.yourVariable = true;
    }
    else {
        $scope.yourVariable = false;
    }
}

Answer 2

这里有一个快速修补你的掠夺者以产生角度结果......但我不确定它将如何与Thymeleaf一起工作：

编辑：修改代码，使其包含控制器（这是处理模型的更好方法），以及控制器如何使用JQuery从服务器呈现的表单中的其他字段中收集值的示例。

如果您需要在页面加载后从服务器收集值，那么我们将进入$ http请求模块。在W3C上学习Angular教程是个好主意：http://www.w3schools.com/angular/default.asp

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
          $scope.account = $('input#_features1').val() == "on" ? true : false;
          $scope.bootfile = $('input#_features2').val() == "on" ? true : false;
      });
    </script>
  </head>
  <body ng-app="myApp" ng-controller="myCtrl">
    <div>
      <form>
        <h3> Values to be displayed</h3>
        <ul>
          <li>
            <input id="features1" type="checkbox" ng-model="account"/>
            <input id="_features1" type="hidden" value="on"/>
            <label for="features1">account</label>
          </li>
          <li>
            <input id="features2" type="checkbox" ng-model="bootfile" />
            <input id="_features2" type="hidden" value="off"/>
            <label for="features2">bootfile</label>
          </li>
        </ul>
        <input type="submit" value="Submit" />
        <input type="reset" value="Reset" />
      </form>
    </div>
    <div>
      <table th:each="info : ${info}" style="width:100%">
        <tr>
          <td >account</td>
          <td>{{!!account}}</td>
        </tr>
        <tr>
          <td>bootfile</td>
          <td>{{!!bootfile}}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

如何使用angularjs显示不同div标签中的显示和隐藏值？

2 个答案: