Question

我有第1部分，第2部分和第3部分的单选按钮，我的要求是在页面加载时，第2部分和第3部分的所有单选按钮都将被禁用，第1部分将被启用。单击第1部分第2部分无线电的任何单选按钮按钮将被启用，再次点击第2部分的任何单选按钮，第3部分单选按钮将被启用。下面是代码，提前感谢。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">

        <table>
        <tr>section1</tr>
            <tr ng-repeat="company in companies">
                <td>
                    <input type="radio" ng-model="userChoice.companyId" name="companyId" value="{{company.id}}" />{{company.name}}
                </td>
            </tr>
        </table>
        <br>
        <br>

        <br>
        <br>

        <table>
        <tr>section2</tr>
            <tr ng-repeat="vendor in vendors">
                <td>
         <input type="radio" ng-model="userChoice.companyId" ng-disabled="!userChoice.companyId" name="vendorId" value="{{vendor.id}}" />{{vendor.name}}
    </td>
            </tr>
        </table>
         <br>
        <br>
        <table>
        <tr>section3</tr>
            <tr ng-repeat="merchant in merchants">
                <td>
         <input type="radio" ng-model="userChoice.companyId" ng-disabled="!userChoice.companyId" name="merchantId" value="{{merchant.id}}" />{{merchant.name}}
    </td>
            </tr>
        </table>
    </div>

脚本

var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {

            $scope.companies = [{
        "id": 4,
        "name": "Facebook"
    }, {
        "id": 3,
        "name": "Twitter"
    }, {
        "id": 2,
        "name": "Google"
    }, {
        "id": 1,
        "name": "Apple"
    }]

    $scope.vendors = [{
        "id": 5,
        "name": "vendor1"
    }, {
        "id": 6,
        "name": "vendor2"
    }, {
        "id": 7,
        "name": "vendor3"
    }, {
        "id": 8,
        "name": "vendor4"
    }]

    $scope.merchants = [{
        "id": 9,
        "name": "merchant1"
    }, {
        "id": 10,
        "name": "merchant2"
    }, {
        "id": 11,
        "name": "merchant3"
    }, {
        "id": 12,
        "name": "merchant4"
    }]
    $scope.userChoice = {};
        });

Answer 1

您的模型和ng-if语句似乎已关闭，您确定要首先检查companyId，然后是vendorId，然后再显示商家吗？

试试这个：

<div ng-app="MyApp" ng-controller="MyController">
    <table>
        <tr>
            <td>section1</td>
        </tr>
        <tr ng-repeat="company in companies">
            <td>
                <input type="radio" ng-model="userChoice.companyId" name="companyId" value="{{company.id}}" />{{company.name}}
            </td>
        </tr>
    </table>
    <br /><br />
    <br /><br />

    <table>
        <tr>
            <td>section2</td>
        </tr>
        <tr ng-repeat="vendor in vendors">
            <td>
                <input type="radio" ng-model="userChoice.vendorId" ng-disabled="!userChoice.companyId" name="vendorId" value="{{vendor.id}}" />{{vendor.name}}
            </td>
        </tr>
    </table>
    <br /><br />
    <br /><br />

    <table>
        <tr>
            <td>section3</td>
        </tr>
        <tr ng-repeat="merchant in merchants">
            <td>
                <input type="radio" ng-model="userChoice.merchantId" ng-disabled="!userChoice.vendorId" name="merchantId" value="{{merchant.id}}" />{{merchant.name}}
            </td>
        </tr>
    </table>
</div>

Answer 2

为每个输入的状态保留3个变量

   $scope.section1 = true;
      $scope.section2 = false;
      $scope.section3 = false;

      $scope.section1change = function() {
        console.log("here")
        $scope.section2 = true;
      }
      $scope.section2change = function() {
        $scope.section3 = true;
      }

然后根据相应的输入更改

更改它们

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="MyApp" ng-controller="MyController">

    <table>
      <tr>section1</tr>
      <tr ng-repeat="company in companies">
        <td>
          <input type="radio" ng-model="userChoice.companyId" name="companyId" value="{{company.id}}" ng-change="section1change()" />{{company.name}}
        </td>
      </tr>
    </table>
    <br>
    <br>

    <br>
    <br>

    <table>
      <tr>section2</tr>
      <tr ng-repeat="vendor in vendors">
        <td>
          <input type="radio" ng-disabled="!section2" ng-model="userChoice.companyId" ng-disabled="!userChoice.companyId" name="vendorId" value="{{vendor.id}}" ng-change="section2change()" />{{vendor.name}}
        </td>
      </tr>
    </table>
    <br>
    <br>
    <table>
      <tr>section3</tr>
      <tr ng-repeat="merchant in merchants">
        <td>
          <input type="radio" ng-disabled="!section3" ng-model="userChoice.companyId" ng-disabled="!userChoice.companyId" name="merchantId" value="{{merchant.id}}" />{{merchant.name}}
        </td>
      </tr>
    </table>
  </div>
  <script>
    var app = angular.module('MyApp', [])
    app.controller('MyController', function($scope) {

      $scope.companies = [{
        "id": 4,
        "name": "Facebook"
      }, {
        "id": 3,
        "name": "Twitter"
      }, {
        "id": 2,
        "name": "Google"
      }, {
        "id": 1,
        "name": "Apple"
      }]

      $scope.vendors = [{
        "id": 5,
        "name": "vendor1"
      }, {
        "id": 6,
        "name": "vendor2"
      }, {
        "id": 7,
        "name": "vendor3"
      }, {
        "id": 8,
        "name": "vendor4"
      }]

      $scope.merchants = [{
        "id": 9,
        "name": "merchant1"
      }, {
        "id": 10,
        "name": "merchant2"
      }, {
        "id": 11,
        "name": "merchant3"
      }, {
        "id": 12,
        "name": "merchant4"
      }]
      $scope.userChoice = {};
      $scope.section1 = true;
      $scope.section2 = false;
      $scope.section3 = false;

      $scope.section1change = function() {
        console.log("here")
        $scope.section2 = true;
      }
      $scope.section2change = function() {
        $scope.section3 = true;
      }
    });
  </script>

</body>

</html>

如何根据angularjs中的其他单选按钮启用单选按钮

HTML

脚本

2 个答案: