Question

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

与this behavior类似，但使用ng-repeat。并且更加动态，使ng-hide使用某种isHidden函数调用ng.models属性，与所选值进行比较

这是我的尝试：http://jsfiddle.net/Td2NZ/260/，其中ng-hide为ng-hide="address.state === 'FL'"

=== FL部分是硬编码＆＃34; FL＆＃34;，但我希望从ng-repeat中重复的输入中提取。

Answer 1

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

你提供的JSFiddle几乎可以工作，如果你想让它与硬编码＆＃34; FL＆＃34;将===更改为==。 ===检查类型和值，您真正想要检查的值是否相等。最好始终使用===，但在这种情况下，您应该使用==。

角

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>

根据下拉列表中的所选选项隐藏输入值，ng-repeat ng-hide

1 个答案:

角

HTML