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

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

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

Answer 2

如果您真的有兴趣以角度方式执行此操作，请先为所有文本控件设置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.

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

使用angularjs隐藏和显示组件

2 个答案: