搜尋

首頁  >  問答  >  主體

angular.js中一組複選框,怎麼實作選其中一個,其他不能選?

angular.js中一組複選框,怎麼實作選中其中一個,其他不能選?

大家讲道理大家讲道理2849 天前730

全部回覆(3)我來回復

  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:06:00

    雷雷

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-15 17:06:00

    ng-model需要一致。用value控制內容.

    <script>
      angular.module('radioExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.color = {
            name: 'blue'
          };
          $scope.specialValue = {
            "id": "12345",
            "value": "green"
          };
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
      <label>
        <input type="radio" ng-model="color.name" value="red">
        Red
      </label><br/>
      <label>
        <input type="radio" ng-model="color.name" ng-value="specialValue">
        Green
      </label><br/>
      <label>
        <input type="radio" ng-model="color.name" value="blue">
        Blue
      </label><br/>
      <tt>color = {{color.name | json}}</tt><br/>
     </form>
     Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.

    回覆
    0
  • 大家讲道理

    大家讲道理2017-05-15 17:06:00

    以下程式碼就是個思路,有很多問題,像是我發現的,清單不能抽出來,用ng-for不可行。 .disabled需要自己調節樣式。

    
    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <p ng-controller="demo">
            <p>当前值: {{hobby}}</p>
            <ul>
                <li>
                    <label>吃:</label>
                    <input type="checkbox" ng-true-value="1" ng-model="hobby" ng-class="{disabled: hobby}" ng-change="handleCheckbox($event)" />
                </li>
                <li>
                    <label>睡:</label>
                    <input type="checkbox" ng-true-value="2" ng-model="hobby" ng-class="{disabled: hobby}" ng-change="handleCheckbox($event)" />
                </li>
            </ul>
        </p>
    
        <script src="//cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script>
        <script>
            angular.module('app', [])
                .controller('demo', ['$scope', function ($scope) {
                    $scope.hobby = false;
                }]);
    
    
        </script>
    </body>
    </html>
    

    回覆
    0
  • 取消回覆