ドロップダウンはラジオボタンの動作を取得して長いリストを非表示にしても問題ありません...しかし、私はそれらを好きではありませんでした。リストとそのスタイルがページと一致しません。AngularJSのドロップダウンのように動作するチェックボックスの一覧を取得する方法
角度を使用してより動的な方法を見つけたいと思います。
チェックボックスがオンになっていると、チェックボックスのリストを表示し、未チェックのチェックボックスをすべて非表示にするにはどうすればよいですか？チェックボックスをオフにすると、すべてのチェックボックスが再び表示されます。
私は以下を試しましたが、運がありません。
<ul>
<li ng-repeat="album in albums | filter: '{{selected}}' ">
<input type="checkbox" ng-model="selected" ng-value="{{album.name}}" />
</li>
</ul>
私はよくあなたの質問を理解していれば、それが動作するはずです：
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
var vm = this;
vm.albums = [
{
"id":"1",
"name":"Album 1"
},
{
"id":"2",
"name":"Album 2"
},
{
"id":"3",
"name":"Album 3"
}
];
vm.selected = {};
vm.disable = {};
$scope.$watch(function() {
return vm.selected;
},
function(newVal, oldVal) {
var newValIndex = 0;
for (var key in newVal) {
if (newVal[key]) {
newValIndex = parseInt(key);
}
}
for (var i = 0; i < vm.albums.length; i++) {
vm.disable[i] = i === newValIndex ? false : newVal[newValIndex.toString()];
}
}, true);
});
})();<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl as main">
<ul>
<li ng-repeat="album in main.albums">
<input type="checkbox" id="album{{$index}}" value="{{album}}" ng-model="main.selected[$index]" ng-disabled="main.disable[$index]">
<label for="album{{$index}}" ng-bind="album.name"></label>
</li>
</ul>
<pre ng-bind="main.selected | json"></pre>
</body>
</html>私はそれが役に立てば幸い。
コントローラを使用して解決策が見つかりました。
コントローラ
albums = [
{
"id":"1",
"name":"Album 1"
},
{
"id":"2",
"name":"Album 2"
},
{
"id":"3",
"name":"Album 3"
}
];
$scope.display = (new Array(albums.lenght)).fill(true);
var onlyOneTrue = function(){
if ($filter("filter")($scope.display , true).length == 1){
return true;
} else {
return false;
}
}
$scope.changed = function(index) {
if (onlyOneTrue()) {
$scope.display.fill(true);
} else {
$scope.display.fill(false)[index] = true;
}
}
HTML
<ul>
<li ng-repeat="album in albums' ">
<input type="checkbox" ng-show="display[$index]" ng-click="changed($index)">
{{album.name}}
</input>
</li>
</ul>
最初にあなたは '{{}}'あなたのフィルタのparamのを削除することができます。 – developer033
sortaは動作しますが、チェックボックスは表示されません。 – Norfeldt
チェックボックスがオンになっている場合、または特定のチェックボックスがオンになっている場合は、他のチェックボックスをすべて無効にしますか？ – developer033