為 ng-repeat 中的選定復選框取值
[英]Take value for selected checkbox in ng-repeat
問題描述
我希望能夠只選擇一個復選框，並在選擇該復選框時在控制器的函數中采用該值。
控制器
$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
3 個解決方案
解決方案1
2 已采納 2015-10-23 14:26:40
編輯 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>
解決方案2
0 2015-10-23 14:33:12
你可以這樣做： 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;
解決方案3
0 2015-10-23 20:28:23
在 AngularJS 中，要使單選按鈕作為一個組工作，您需要添加value屬性，該屬性應該只是字符串。
選擇時應將 ngModel 表達式設置為的值。 請注意， value 僅支持字符串值，即范圍模型也必須是字符串。 如果您需要復雜模型（數字、對象等），請使用 ngValue。
因此，通過添加value來修改您的示例，您可以獲得所需的結果。
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) } }])
<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>
由於您希望一次只選中一次復選框（不建議這樣做，因為這不是它們的實際目的）。
復選框在功能上是不同的（允許選擇多個值），但我們可以模擬與單選按鈕相同的功能，這確實需要使用 javascript。
下面是執行相同操作的示例，
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) } } } } } ])
<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>
僅在選中復選框並控制移除值時，才從ng-repeat中移除元素
[英]removing a element from ng-repeat only when checkbox is selected and console the removed value
如何在Angularjs中使用ng-repeat更改選定的索引項值？
[英]How to change selected index item value with ng-repeat in Angularjs?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.