角度從複選框中獲取所選值

我似乎無法從輸入複選框中獲取所選項目。角度從複選框中獲取所選值

<ul> 
    <li ng-repeat='shoe in shoebox'> 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
    </li> 
    <button ng-click='whatIsChecked(shoe.selected)'>Apply</button> 
</ul>

然後在我的控制器：

$scope.whatIsChecked = function(selectedThing) { 
    console.log(selectedThing); 
};

以上的回報undefined。

列表項顯示正確，但shoe.name或已檢查的項目似乎未被ng-model存儲。

來源

2017-04-24 bruh

是在**鞋盒數據**更新時，你改了嗎？ –

我不會更改鞋盒中的數據。目前，它是一個正確打印出不同鞋子的集合。當我選擇相關的複選框時，我希望將該項目存儲在模型上。希望能回答你的問題 – bruh

變量shoe僅在ng-repeat塊中有效。

如果你想得到什麼選擇，你應該嘗試filter。

UPD： 既然你沒有選擇的屬性，則應通過燒成ng-click事件保持所選項目的其他地方。

請參閱下面的代碼片段。

angular.module("app", []) 
 
    .controller("myCtrl", function($scope) { 
 
    
 
    $scope.checkedShoes = []; 
 
    
 
    $scope.shoebox = [{ 
 
     name: 'shoe1' 
 
     }, 
 
     { 
 
     name: 'shoe2' 
 
     }, 
 
     { 
 
     name: 'shoe3' 
 
     }, 
 
     { 
 
     name: 'shoe4' 
 
     } 
 
    ]; 
 
    
 
    $scope.save = function(e, shoe) { 
 
     if (e.target.checked) { 
 
     $scope.checkedShoes.push(shoe); 
 
     } else { 
 
     var index = $scope.checkedShoes.indexOf(shoe); 
 
     if(index > -1) { 
 
      $scope.checkedShoes.splice(index, 1); 
 
     } 
 
     } 
 
     
 
    }; 
 
    
 
    $scope.whatIsChecked = function() { 
 
     //var selected = $scope.shoebox.filter(function(item) { 
 
     // return item.selected === true; 
 
     //}); 
 
     
 
     console.log($scope.checkedShoes); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="app" , ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
     <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'> 
 
     <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='whatIsChecked()'>Apply</button> 
 
    </ul> 
 
</div>

來源

2017-04-24 02:19:39 Pengyy

我可以運行你的代碼片段，但是它工作的很好，但是 - 當我嘗試時 - 我得到了一個從'console.log（selected）'返回的空數組[']'。我認爲這是因爲我沒有明確地將每隻鞋都設置爲像您在示例中那樣虛假。這可以修改爲不需要在每個鞋類對象中的「選定」屬性？ – bruh

@bruh所以你的意思是不要將選擇的信息保存在你的'鞋盒'中？ – Pengyy

我用'shoe.selected'作爲ng模型的示例名稱。我實際上並沒有在每個鞋類對象中擁有「selected」屬性（就像您在示例中那樣）。 *我相信*這就是爲什麼當我嘗試'console.log（選擇）時返回空數組'' – bruh

你可以得到使用，當你有多個項目檢查變得容易相處的angular.Foreach的檢查項目。

$scope.checkedItems = []; 
     angular.forEach($scope.shoebox, function(value, key) { 
      if (value.selected) 
      $scope.checkedItems.push(value.name); 
});

演示

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.shoebox = [{ 
 
    name: 'Reboke', 
 
    selected: false 
 
    }, { 
 
    name: 'woodlands', 
 
    selected: false 
 
    }, { 
 
    name: 'Nike', 
 
    selected: false 
 
    }, { 
 
    name: 'Fila', 
 
    selected: false 
 
    }]; 
 
    $scope.checkedItems = function() { 
 
    $scope.checkedItems = []; 
 
    angular.forEach($scope.shoebox, function(value, key) { 
 
     if (value.selected) 
 
     $scope.checkedItems.push(value.name); 
 
    }); 
 

 
    } 
 
});

<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS </title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='checkedItems()'>Apply</button> 
 
    Checked items are: {{checkedItems}} 
 
</ul> 
 
     
 
</body> 
 
</html>

來源

2017-04-24 02:22:21 Sajeetharan

角度從複選框中獲取所選值

回答

相關問題