我的 Angular JS 页面上有以下下拉列表:
<div class="col-md-4 fieldMargin">
<div class="dropdownIcon">
<select name="actions" id="actions"
ng-init="Data.formStatus.Action=Data.Actions[0]"
ng-options="option.Value for option in Data.Actions"
ng-focus="ActionsLabel = true" ng-blur="ActionsLabel = false;"
ng-model="Data.formStatus.Action"
></select>
<label for="actions" class="labelColor"
ng-class="{'dropdownLabelFloat' : (ActionsLabel || Data.formStatus.Action != null), 'dropdownLabel' : !ActionsLabel && !Data.formStatus.Action }">
Action
</label>
</div>
</div>
这些是上述下拉菜单的选项:
Test1
Test12
Test14
Test18
Test25
and so on
根据用户在上面的操作下拉列表中所做的任何选择,我想更改同一页面上另一个控件的 ng-model:
这是另一个控件:
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.To" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
在“操作”下拉列表中,如果用户选择“Test1”,那么我希望 ng-model 为:
Data.EmailInput.To
但是如果用户从“操作”下拉列表中选择“Test18”或“Test25”,那么我希望 ng-model 为:
Data.EmailInput.ToSpecialCase
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.ToSpecialCase" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
是否可以在 angularJs HTML 页面上做一些事情。我尝试做这样的事情:
<div ng-if={{Data.formStatus.Action}} = "Test1" >
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.To" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
</div>
<div ng-else-if="Test18" or "Test25">
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.ToSpecialCase" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
</div>
因此,如果用户从下拉列表中选择“Test1”,那么我想显示:
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.To" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
</div>
否则,如果用户选择“test18”或“test25”,那么我想显示:
<div>
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.ToSpecialCase" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
我对 AngularJs 很陌生。对此的任何帮助将不胜感激。
你已经快到了,AngularJS 中没有“其他”。所以只需制作 2 个
ng-if
即可。此外,您不需要在任何 {{}}
语句(如 ng-
)中使用把手 ng-if
。
<div ng-if="Data.formStatus.Action == 'Test1'">
<!-- first block using the ng-model="Data.EmailInput.To" -->
</div>
<div ng-if="Data.formStatus.Action == 'Test18' || Data.formStatus.Action == 'Test25'">
<!-- second block using the ng-model="Data.EmailInput.ToSpecialCase" -->
</div>
我不太明白
Data
在这种情况下是什么,我希望它是控制器 $scope 的 as
语法,无论如何请找到下面的工作示例供您参考,我们可以对测试 1 值进行相等检查,然后我们可以使用数组 includes
方法来检查它是否是多个值之一,测试 18 和测试 25
function Channels($scope) {
$scope.ActionsLabel = false;
$scope.Actions = [{
Value: 'Test1'
},
{
Value: 'Test18'
},
{
Value: 'Test25'
},
];
$scope.formStatus = {
Action: '',
};
$scope.EmailInput = {
To: '',
ToSpecialCase: '',
};
}
angular.module('app', [])
.controller('Channels', Channels);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Channels">
<div class="col-md-4 fieldMargin">
<div class="dropdownIcon">
<select name="actions" id="actions" ng-init="formStatus.Action=Actions[0]" ng-options="option.Value for option in Actions" ng-focus="ActionsLabel = true" ng-model="formStatus.Action"></select>
<label for="actions" class="labelColor">
Action
</label>
</div>
</div>
<div ng-if="formStatus.Action.Value == 'Test1'">
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="EmailInput.To" placeholder="to" />
<label for="to" class="labelColor">
To
</label>
</div>
</div>
<div ng-if="['Test18', 'Test25'].includes(formStatus.Action.Value)">
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="EmailInput.ToSpecialCase" placeholder="ToSpecialCase" />
<label for="to" class="labelColor">
To
</label>
</div>
</div>
</div>