API Controls API Controls - 1 month ago 8
ASP.NET (C#) Question

hide and show component with angularjs

I am creating a web app in c# but i am using angularjs for fetching data from sql-server and there is one issue for me

as i am using angular for fetching the data I want to use angular for showing and hiding the required component

like there is a dropdownlist

<select>
<option>Guest</option>
<option>Google</option>
<option>User</option>
</select>


and i have 3 textboxes

<input type="text" visible="false" name="Guest">
<input type="text" visible="false" name="Google">
<input type="text" visible="false" name="User">


If a user select Guest from dropdownlist

<input type="text" visible="false" name="Guest">

this textbox should be visible

If a user select Google from dropdownlist

<input type="text" visible="false" name="Google">

this textbox should be visible

If a user select User from dropdownlist

<input type="text" visible="false" name="User">

this textbox should be visible

now I want to know how to hide or show these component in angularJS

Answer

If you are really interested to do it in angular way the set ng-model and ng-show first for all text controls.

<select ng-model="ddSelect" ng-change="getOptions()">
<option>Guest</option>
<option>Google</option>
<option>User</option>
</select>

<input type="text" visible="false" name="Guest" ng-model="txtGuest" ng-show="isGuestVisible">
<input type="text" visible="false" name="Google" ng-model="txtGoogle" ng-show="isGoogleVisible">
<input type="text" visible="false" name="User"  ng-model="txtUser" ng-show="isUserVisible">

Now in controller get hold of getOptions

$scope.isGuestVisible = false;
$scope.isGoogleVisible = false;
$scope.isUserVisible = false;

$scope.getOptions = function(){

if($scope.ddSelect === "Guest"){
    $scope.isGuestVisible = true;
    $scope.isGoogleVisible = false;
    $scope.isUserVisible = false;
}
}

//Likewise check other options and set ng-show.

Note: This solution is given based on your exact case study .It could be made more dynamic thus reducing if.

Comments