I am encountering a scope problem with a button on my webpage. The page contains a ui-grid, and when the "Add New" button is clicked, it hides the grid and displays a div where users can input a new record. After saving the information and returning to the original view with the grid displayed, I face an issue where clicking the "Add New" button again results in a loss of its $scope.
Below is the HTML code snippet:
<div ng-app="myModule" ng-controller="OperatorCtrl">
<div class="panel panel-primary">
<div class="panel-heading">Business Unit Administration</div>
<div class="panel-body">
<div ng-hide="noView">
@Html.Label("Edit a Business Unit below to assign Users and Contractors")
<div>
<div ui-grid="gridOptions" class="grid" ng-style="{height: (gridOptions.data.length*30)+32+'px'}" ui-grid-auto-resize></div>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" style="width:100px" ng-click="addNew()">Add New</button>
</div>
</div>
<div ng-show="noView">
<form name="AddBusinessUnitForm">
<table style="width:100%">
<thead>
<tr>
<th>Business Unit Name</th>
<th>Operator System ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" style="width:200px" ng-model="form.vchDescription" /></td>
<td><input type="text" style="width:300px" ng-model="form.vchOperatorSystemID" /></td>
<td ng-show="addNew"><button type="button" class="btn btn-info btn-sm" ng-click="saveNew()">Save</button></td>
<td>
<button type="button" class="btn btn-primary" style="width:100px" ng-click="return()">Close</button>
</tr>
</tbody>
</table>
</form>
The functionality of the "Add New" and "Close" buttons relies on toggling the "noView" variable to show or hide different sections.
Below you will find the AngularJS code snippet:
$scope.addNew = function () {
$scope.noView = true;
};
$scope.saveNew = function () {
$scope.businessUnitName = $scope.form.vchDescription;
operatorService.savenew($scope.form)
.success(function (data) {
$scope.businessUnitID = data;
getUsers($scope.businessUnitID);
$scope.viewTabs = true;
$scope.addNew = false;
});
};
$scope.return = function () {
$scope.noView = false;
};
As someone new to Angular, maintaining the button's scope poses a challenge for me at this stage.
Any assistance provided would be immensely valuable!