Question

我希望能够只选择一个复选框，并选择该复选框以在控制器中获取该值。

控制器

$foldersArray = [Folder 1 , Folder 2, Folder 3....];

$selectedFolderName = function(){
   var folderName = 'folder name '
}

查看

<div class="checkbox">
  <ui>
    <li ng-repeat="folder in foldersArray">
       <label><input type="checkbox" ng-checked="folder" ng-click=selectedFolderName()"/>{{folder}}</label>
   </li>
  </ui>
</div>

使用单选按钮进行编辑

我尝试用这样的单选按钮：

<div class="radio">
      <ui>
        <li ng-repeat="folder in foldersArray">
           <label><input type="radio" ng-model="folder.selected" ng-change=selectedFolderName(folder)"/>{{folder}}</label>
       </li>
      </ui>
    </div>

在控制器中

$selectedFolderName = function(folder){
       console.log(folder.selected);
    }

就像这样，我的所有单选按钮都被选中......在控制台中没有任何东西......

编辑添加PLUNKER

这是plunker： plnkr.co/edit/xD0w4O1OC9xoKgYhXeMR?p=preview

Answer 1

编辑1

为了解决这个问题：

删除attr ng-model
将ng-change更改为ng-click
在selectedFolderName

看看这个：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.foldersArray = ['Folder1', 'Folder2', 'Folder3'];

  $scope.selectedFolderName = function(folder) {
    var folderName = folder;
    console.log(folderName);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="radio">
    <ui>
      <li ng-repeat="folder in foldersArray">
        <label>
          <input type="radio" ng-click="selectedFolderName(folder)">{{folder}}</label>
      </li>
    </ui>
  </div>

</body>

</html>

编辑2

var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.foldersArray = ['Folder1', 'Folder2', 'Folder3'];

      $scope.selectedFolderName = function(folder) {
        var folderName = folder;
        console.log(folderName);
      };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <!DOCTYPE html>
    <html ng-app="plunker">

    <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>
      <link rel="stylesheet" href="style.css" />
      <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
      <script src="app.js"></script>
    </head>

    <body ng-controller="MainCtrl">
      <div class="radio">
        <ui>
          <li ng-repeat="folder in foldersArray">
            <label>
              <input type="radio" ng-model="itemFolder" name="folder" ng-click="selectedFolderName(folder)">{{folder}}</label>
          </li>
        </ui>
      </div>

    </body>

    </html>

Answer 2

您可以执行以下操作：http://plnkr.co/edit/1wzsyeL9oA0w26Zznodj?p=preview

我已经更改了ng-repeat (example)：

  <li ng-repeat="(folder,selected) in foldersArray">
    <label>
      <input type="radio" name="folder[]" ng-model="selectedFolder" ng-change="selectedFolderName(folder)">{{folder}}</label>
  </li>

编辑：您可以这样操作数据：

$scope.foldersArray = ['Folder1', 'Folder2', 'Folder3'];
$scope.foldersArrayNew = {};
for(var i = 0; i < $scope.foldersArray.length;i++) {
    $scope.foldersArrayNew[$scope.foldersArray[i]] = {selected: false};
}
$scope.foldersArray = $scope.foldersArrayNew;

Answer 3

在AngularJS中，要将单选按钮作为一个组工作，您需要添加value属性，该属性应该只是字符串。

摘自AngularJS Docs

选中时应设置ngModel表达式的值。请注意，值仅支持字符串值，即范围模型也需要是字符串。如果您需要复杂的模型（数字，对象，......），请使用ngValue。

因此，通过添加value来修改您的示例，您可以获得所需的结果。

＆＃13;

var app = angular.module("testapp", []);
app.controller("arrCntrl", ["$scope", function ($scope) {
    $scope.foldersArray = ["Folder 1", "Folder 2", "Folder 3"];
    $scope.selectedFolder = {
        name: ""
    };
    $scope.selectedFolderName = function (folder) {
        console.log($scope.selectedFolder)
    }

    
}])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testapp">
    <div class="radio" ng-controller="arrCntrl">
        <ui>
            <li ng-repeat="folder in foldersArray">
                <label>
                    <input type="radio" ng-model="selectedFolder.name" value="{{folder}}" ng-change="selectedFolderName(selected)" />{{folder}}</label>
            </li>
        </ui>
    </div>
    <hr/>
    
</div>

＆＃13;

由于您希望一次只选中一次复选框（不建议这样做，因为这不是他们的实际目的）。

复选框功能不同（允许选择多个值），但我们可以模拟与单选按钮相同的功能，这确实需要使用javascript。

以下是做同样的例子，

＆＃13;

var app = angular.module("testapp", []);
app.controller("arrCntrl", ["$scope",
  function($scope) {
    $scope.foldersArray = ["Folder 1", "Folder 2", "Folder 3"];


    $scope.selectedFolderNameChkBox = function(folder, isChecked) {

      var allChkBoxes = document.getElementsByName("folderChkBox");
      for (var i = 0; i < allChkBoxes.length; i++) {
        //console.log(angular.element(allChkBoxes[i]).scope.isChecked);
        if (allChkBoxes[i].value != folder) {
          allChkBoxes[i].checked = false;
        } else {
          if (allChkBoxes[i].checked) {
            console.log(allChkBoxes[i].value)
          }
        }
      }
    }
  }
])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testapp">

  <div class="checkbox" ng-controller="arrCntrl">
    <ui>
      <li ng-repeat="folder in foldersArray">
        <label>
          <input type="checkbox" name="folderChkBox" value="{{folder}}" ng-click="selectedFolderNameChkBox(folder)" />{{folder}}</label>
      </li>
    </ui>
  </div>
</div>

＆＃13;

获取ng-repeat中所选复选框的值

3 个答案: