AngularJS 内联/无 div 可见性答案

【问题标题】：AngularJS inline/none div visibilityAngularJS 内联/无 div 可见性
【发布时间】：2021-05-07 08:14:06
【问题描述】：

您好，我想控制表单的 div 可见性。但 angularJS 似乎与 html/javascript 不同

我的代码

html:

                    <select name="homeworkingselect"  id="homeworkingselect" value="0" onclick="WorkTravelControl()">
                        <option value="0" selected></option>
                        <option value="4">4</option>
                        <option value="8">8</option>
                    </select>
                  
                </td>
                <td>
                    <input type="text" ng-model="outsideluxWork.value" class="homeworking" style="display: none;"></td>
                </td>
                <td>
                    <input type="text" ng-model="outsideluxTravel.value" class="homeworking" style="display: none;"></td>
                
            </tr>

JS：

$scope.WorkTravelControl = function () {
    document.getElementById("homeworkingselect").addEventListener("change", function(e) {
        value = e.target.value;
        homeworking = document.querySelectorAll(".homeworking");
        homeworking.forEach(function(el) {
        el.style.display = (value == 0) ? "none" : "inline";
        });
        });
        };

最后的错误

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

由于您试图触发角度事件，请使用ng-click 而不是onclick

Docs

工作示例

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.WorkTravelControl = function() {
    document
      .getElementById("homeworkingselect")
      .addEventListener("change", function(e) {
        value = e.target.value;
        homeworking = document.querySelectorAll(".homeworking");
        homeworking.forEach(function(el) {
          el.style.display = value == 0 ? "none" : "inline";
        });
      });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <select
    name="homeworkingselect"
    id="homeworkingselect"
    value="0"
    ng-click="WorkTravelControl()"
  >
    <option value="0" selected></option>
    <option value="4">4</option>
    <option value="8">8</option>
  </select>
  <input
    type="text"
    ng-model="outsideluxWork.value"
    class="homeworking"
    style="display: none;"
  />
  <input
    type="text"
    ng-model="outsideluxTravel.value"
    class="homeworking"
    style="display: none;"
  />
</div>

【讨论】：