使用angularjs隐藏和显示组件

Question

我正在用 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 中隐藏或显示这些组件

Answer 1

如果您真的有兴趣以角度方式进行设置，请首先为所有文本控件设置 ng-model 和 ng-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.

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

Answer 2

您可以使用ngShow 和select 指令。它看起来像：

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