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

Activate particular drop-down list when user selects the radio button in AngularJS

本文关键字:激活 下拉列表 单选按钮 用户 AngularJS 选择      更新时间:2023-09-26

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

<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中做到这一点?他们有什么指令可以解决这个问题吗?

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>