当用户选择AngularJS中的单选按钮时,激活特定的下拉列表

时间:2014-08-10 11:26:39

标签: javascript angularjs angularjs-directive

在我解释我的问题之前,下面是我的简单代码

<body>

    <div>   
        <input type="radio" name="salary"/>Per Year
            <select>
                <option value="0">All</option>
                <option value="40000">$40,000.00+</option>
                <option value="50000">$50,000.00+</option>

            </select>
    </div>


    <div>
      <input type="radio" name="salary"/>Per Hour
          <select>
                <option value="0">All</option>
                <option value="20">$20.00+</option>
                <option value="25">$25.00+</option>

            </select>
     </div
</body>

我想要实现的是当用户选择值为“每年”的单选按钮时。我想禁用另一个单选按钮[值为“每小时”]。所以他无法从其他选项中选择值 - 列表。

我如何在AngularJS中执行此操作?他们的任何指令都可以解决这个问题吗?

1 个答案:

答案 0 :(得分:3)

http://jsbin.com/boqexu/1/edit

<body ng-app="app">
  <div ng-controller="firstCtrl">
     <div>
        <input type="radio"  name="salary" ng-model="type" value="year"/>Per Year
            <select ng-model="year.value" ng-disabled="type =='hour'">
                <option value="0">All</option>
                <option value="40000">$40,000.00+</option>
                <option value="50000">$50,000.00+</option>

            </select>
    </div>


    <div>
      <input type="radio" name="salary" ng-model="type" value="hour"/>Per Hour
          <select ng-disabled="type =='year'" ng-model="hour.value">
                <option value="0">All</option>
                <option value="20">$20.00+</option>
                <option value="25">$25.00+</option>

            </select>
    </div>



      </div>
</body>