隐藏基于下拉列表中所选选项的输入值，ng重复ng隐藏

hide input values based on selected option in dropdown, ng-repeat ng-hide

本文关键字：ng 隐藏 输入 重复 下拉列表 选项      更新时间：2023-09-26

如果没有JQuery，当在<select>下拉菜单中进行选择时，我希望能够隐藏某些表单输入字段。

类似于此行为，但使用ng重复。更动态一点，使ng-hide使用某种isHidden函数调用ng.models属性，与所选值相比

以下是我的尝试：http://jsfiddle.net/Td2NZ/260/，ng隐藏为ng-hide="address.state === 'FL'"

=== FL部分是硬编码"FL"，但我想从ng repeat中重复的输入中得出。

Fiddle：http://jsfiddle.net/Td2NZ/261/

需要注意的几点是：确定某个内容是否隐藏的方法应该是要隐藏的输入的属性，而不是选择菜单选项。您在下拉列表affects: xxx中有一个属性，现在它是输入的一个属性：hiddenBy: xxx。同样为了隐藏标签，ng-hide已移动到<div>标签。这应该会让你开始。帮助解决此问题的另一个资源是http://plnkr.co/edit/SxIvt4KThWLtWvh3PnOh?p=preview

您提供的JSFiddle几乎可以工作，如果您希望它与硬编码的"FL"一起工作，请将===更改为==。===检查类型和值，您真正想检查的只是值是否相等。最好始终使用===，但在这种情况下应该使用==。

有角度的

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.addresses = [
    {'state': 'AL'},
    {'state': 'CA'},
    {'state': 'FL'}
];
$scope.lov_state = [
    {'lookupCode': 'AL', 'description': 'Alabama'},
    {'lookupCode': 'FL', 'description': 'Florida'},
    {'lookupCode': 'CA', 'description': 'California'},
    {'lookupCode': 'DE', 'description': 'Delaware', 'affects': 'hidden'}
];
$scope.inputs_text = [
        {label: "Start Date", input:'yyyy-mm-dd', name:'dat_start', isRequired: "true"},
        {label: "End Date", input:'yyyy-mm-dd', name:'dat_end', isRequired: "true"},
    {label: "hide_for_FL", input:'wow', name:'hidden', isRequired: "true", hiddenBy: 'FL'}
        ];
$scope.isHidden = function(){
    return message = (address.state === 'FL');
};
});

html

<div ng-controller="MyCtrl">
    <div>Billing State:
        <select ng-model="address.state" ng-options="state.lookupCode as state.description for state in lov_state" ng-init="address.state=1"></select>
        <p> address.state: {{address.state}}</p>
    </div>
     <br> <tt>State selected: {{address.state}}</tt>
    <div ng-repeat="input in inputs_text" ng-hide="(input.hiddenBy == address.state)">
        <label>{{input.label}}</label>
        <input name="{{input.name}}" id="{{input.name}}" ng-model="input.input" ng-require="input.isRequired"></input> <!-- function -- find address.state in the array, when match found get affects option and if it equals input.input return true -->
        <p> Input: {{input.input}}</p>
    </div>
</div>
相关文章：