使用复选框和下拉列表选项禁用输入字段

时间:2016-06-08 03:12:26

标签: angularjs

我总共有3个字段。第一个是复选框。选择后,应激活输入字段。第二个是下拉列表,当选择某个选项时,应激活输入字段。第三个字段是实际输入字段,只有在选中复选框并且下拉列表具有特定选择时才需要激活该字段。

<input type="checkbox" ng-model="checkValue">
<select name="select" ng-model="selectValue">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  <option value="option-4">Option 4</option>
</select>
<input type="text" ng-model="inputValue" ng-disabled="!checkValue && selectValue != 'option-1'">

1 个答案:

答案 0 :(得分:2)

你是对的评论,它正在绕过你的选择框模型。下面的东西在fidde为我工作。

<input type="text" ng-model="inputValue" ng-disabled="(!checkValue) || (checkValue && selectValue == undefined)">

检查小提琴:http://jsfiddle.net/Lvc0u55v/5106/

通过添加控制输入框状态的范围函数,可以添加更强大的场景。

<input type="text" ng-model="inputValue" ng-disabled="(!checkValue) || (checkValue && setInputState(selectValue))">

  $scope.setInputState= function(input){
    var state= false;
    if(input === undefined || input != 'option-1'){
        state = true;
    }
    return state;
   }