recherche

Maison  >  Questions et réponses  >  le corps du texte

angular.js中一组复选框，怎么实现选中其中一个，其他不能选？

angular.js中一组复选框，怎么实现选中其中一个，其他不能选？

大家讲道理大家讲道理2745 Il y a quelques jours677

répondre à tous(3)je répondrai

  • 伊谢尔伦

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

    <!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <p ng-controller="demo">
        <p>当前值： {{hobby}}</p>
        <ul>
            <li ng-repeat="i in [1,2,3]">
                <label>吃：</label>
                <input type="checkbox" ng-click="check(i)" ng-disabled="hobby == i" ng-checked="hobby == i" />
            </li>
        </ul>
    </p>

    <script src="http://cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script>

    <script>
        angular.module('app', []).controller('demo', ['$scope', function ($scope) {
            $scope.hobby = 1;

            $scope.check = function (i) {
                $scope.hobby = i;
            }
        }]);
    </script>
</body>
</html>

    répondre
    0
  • PHP中文网

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

    ng-modelLa cohérence est requise. Utilisez la valeur pour contrôler le contenu.

    <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`.

    répondre
    0
  • 大家讲道理

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

    Le code suivant n'est qu'une idée. Il y a de nombreux problèmes, par exemple, j'ai trouvé que la liste ne peut pas être extraite et que l'utilisation de ng-for n'est pas réalisable. .disabled vous oblige à ajuster le style vous-même. 

    
<!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>

    répondre
    0
  • Annulerrépondre