AngularJS inline/none div 可见度

Question

您好，我想控制 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";
        });
        });
        };

最后一个错误

Answer 1

由于您正在尝试触发 angular 事件，请使用 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>

AngularJS inline/none div 可见度

AngularJS inline/none div visibility

html

javascript

css

angularjs