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
Answer
Since you are trying to trigger angular event, use ng-click instead of onclick
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>