AngularJS:未选择下拉列表时隐藏div，并输出文本

Question

我仍然是AngularJS的新手，我试图寻找解决问题的方法，但我似乎找不到专门解决这个问题的方法。对不起，如果之前有人问过这个问题！我的意思是，我仍然不知道这有多少工作。

我有一个使用 ng-repeat 显示的项目数组。每个项目都有一个下拉列表，可以在其中选择"是"或"否"，或将其保留为未选中状态。对数据进行排序，以便设置为"是"或"否"的任何内容都移动到列表顶部。

我目前还有一个复选框，允许他们隐藏一个项目，隐藏它，并将其移动到数组的末尾，这样它就不会把它们弄乱。

相反，我想有一个按钮来隐藏所有未选择的项目(值既不是"是"也不是"否"(，而不是使它们一次隐藏一个。

第二：他们选择"是"的任何项目都应将其名称显示在字段一中;他们选择"否"的任何项目的名称都应显示在字段二中。

这是我的代码：

var app = angular.module('List', []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.selected = false;
$scope.pList = [
{
id: '1',
title: 'Apples',
checked: false
},
{
id: '2',
title: 'Oranges',
checked: false
},
{
id: '3',
title: 'Bananas',
checked: false
},
{
id: '3',
title: 'Pears',
checked: false
}
];
$scope.pStatus = [
{
stat: 'Unselected',
color: 'black'
},
{
stat: 'Yes',
color: 'green',
},
{
stat: 'No',
color: 'red'
}
];

}](;

<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="stuff in pList |  orderBy: ['checked', 'selectedpStatus', 'id']:false">
<div ng-hide="stuff.checked">
<h2 class="title">{{ stuff.title }}</h2>
<br /><br /><br />
<div class="status" ng-style="{'color':stuff.pStatus.color}">
<select ng-model="stuff.selectedpStatus" ng-options="item.stat for item in pStatus"></select>
</div>
<p class="normal">Hide <label><input type="checkbox" ng-model="stuff.checked" id="{{ stuff.id }}" /></label></p>
</div>
</div>
<br /><br />
<div class="main">
Field One: :{{ stuff.title }}:
<br />
Field Two:  :{{ stuff.title }}
</div>
</div>

感谢您的任何帮助！

Answer 1

我通常想问几个问题/澄清，但这里有一个答案应该可以进一步指导你：

1. 在作用域上有一个属性，用于存储是否应应用筛选器。
2. 然后，您可以使用控制器中的filter或全局定义来筛选数组。或者，只需在每个元素上使用ng-if指令隐藏您不想显示的元素。
3. 在字段 1 与 2 中显示标题的逻辑很简单;问题是是对所有项目执行此操作，还是想以某种方式选择一个要在重复之外显示的项目。

不过，这是一个基本解决方案：

<button type="button" ng-click="toggle()">Hide/Show Unselected</button><br>
Hide all: {{ hideAll }}<br />
<div class="card" ng-repeat="stuff in pList |  orderBy: ['checked', 'selectedpStatus', 'id']:false"
ng-if="!hideAll || !stuff.selectedpStatus || stuff.selectedpStatus.stat !== 'Unselected'">
<div ng-hide="stuff.checked">
<h2 class="title">{{ stuff.title }}</h2>
<div class="status" ng-style="{'color':stuff.pStatus.color}">
<select ng-model="stuff.selectedpStatus" ng-options="item.stat for item in pStatus"></select>
</div>
stuff.selectedpStatus: {{ stuff.selectedpStatus }}<br>
Field One: {{ stuff.selectedpStatus && stuff.selectedpStatus.stat === 'Yes'  ? stuff.title : '' }}<br />
Field Two: {{ stuff.selectedpStatus && stuff.selectedpStatus.stat === 'No'  ? stuff.title : '' }}<br />
</div>
</div>

和

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.selected = false;
$scope.hideAll = false;
$scope.pList = [{
id: '1',
title: 'Apples',
checked: false 
}, {
id: '2',
title: 'Oranges',
checked: false
}, {
id: '3',
title: 'Bananas',
checked: false
}, {
id: '3',
title: 'Pears',
checked: false
}];
$scope.pStatus = [{
stat: 'Unselected',
color: 'black'
}, {
stat: 'Yes',
color: 'green',
}, {
stat: 'No',
color: 'red'
}];
$scope.toggle = function() {
$scope.hideAll = !$scope.hideAll; 
}
});

在 plunkr 中：https://plnkr.co/edit/PBr753nznrMwsgAIsTwE?p=preview