AngularJS inline/none div visibility

Hi i want to control my div visibility of my form. but it seem different wi angularJS than html/javascript

my code

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";
        });
        });
        };

and last the error

enter image description here

Answer

Since you are trying to trigger angular event, use ng-click instead of onclick

Docs

Working example

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>

Leave a Reply

Your email address will not be published. Required fields are marked *