使用angularjs隐藏和显示组件

时间:2016-10-07 10:58:41

标签: javascript asp.net angularjs

我在c#中创建一个Web应用程序,但是我使用angularjs从sql-server获取数据,而且我有一个问题

因为我使用angular来获取数据我想使用angular来显示和隐藏所需的组件

就像有一个下拉列表

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

我有3个文本框

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

如果用户从下拉列表中选择访客

<input type="text" visible="false" name="Guest"> 这个文本框应该是可见的

如果用户从下拉列表中选择Google

<input type="text" visible="false" name="Google"> 这个文本框应该是可见的

如果用户从下拉列表中选择用户

<input type="text" visible="false" name="User"> 这个文本框应该是可见的

现在我想知道如何在angularJS中隐藏或显示这些组件

2 个答案:

答案 0 :(得分:0)

您可以使用ngShowselect指令。它看起来像是:

<select ng-model="selected">
    <option value="Guest">Guest</option>
    ...
</select>
...
<input type="text" ng-show="selected === 'Guest'" name="Guest">

答案 1 :(得分:0)

如果您真的有兴趣以角度方式执行此操作,请先为所有文本控件设置ng-modelng-show

<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">

现在在控制器中获取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.

注意:此解决方案是根据您的确切案例研究给出的。它可以变得更加动态,从而减少了。