<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul class="list">
<li class="item">
Accommodation Options
<button ng-click="modifyMode=true" ng-hide="modifyMode" class="alterBtn">Modify</button>
<button ng-show="modifyMode" class="ion-plus addNewBtn" data-pack="default"></button>
</li>
<div class="inputRowWrap" ng-show="modifyMode">
<div class="row">
<div class="col col-40">
<label class="item item-input">
<input type="text" placeholder="Accommodation #1">
</label>
</div>
<div class="col col-40">
<label class="item item-input">
<input type="text" placeholder="Type">
</label>
</div>
<div class="col">
<select>
<option selected="">Single</option>
<option>Double</option>
<option>Triple</option>
<option>Quad</option>
<option>Queen</option>
<option>King</option>
</select>
</div>
</div>
<div class="padding saveChangesBtnWrap">
<button ng-click="submitChanges()" class="button button-block button-positive">Save Changes</button>
</div>
</div>
</ul>
<hr>
{{modifyMode}}
</html>
$scope.submitChanges = function(){
$scope.modifyMode = false;
}
}
I am encountering an issue with my $scope.modifmode variable, it doesn't seem to update when the function is triggered. Despite adding an alert, the function did execute. Any suggestions?