Javascript AngularJS：未选中下拉列表时隐藏div，并输出文本

我对AngularJS还是个新手，我一直在寻找解决我问题的方法，但我似乎找不到一个专门解决这个问题的方法。对不起，如果以前有人问过这个问题！说到新的，我的意思是，我仍然不知道这有多有效

我有一个用ng repeat显示的项目数组。每个项目都有一个下拉列表，可以在其中选择是或否，也可以不选择。对数据进行排序，以便设置为“是”或“否”的任何内容都会移动到列表的顶部

我现在还有一个复选框，允许他们隐藏一个项目，这会隐藏它，并将它移动到数组的末尾，这样就不会使它们混乱

我希望有一个按钮来隐藏所有未选中的项目（值既不是Yes也不是No），而不是让它们一次隐藏一个

第二：选择“是”的任何项目都应在字段1中显示其名称；选择“否”的任何项目的名称应显示在字段2中

这是我的密码：

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'
}
];

}]))；

{{stuff.title}




隐藏




字段一：：{stuff.title}}：


字段二：：{stuff.title}

---

谢谢你的帮助

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

在存储是否应应用筛选器的作用域上具有属性

然后，您可以使用控制器中的

过滤器

或全局定义的过滤器过滤阵列。或者，在每个元素上使用

ng if

指令隐藏不希望显示的元素

在字段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>

---

砰的一声：

太棒了！它隐藏了我想隐藏的一切，也展示了我想展示的一切。非常感谢你！回答澄清：我希望pList.title显示在外部字段中，并将所有设置为“是”的字段都显示在该字段中。比如，是的：“苹果，香蕉”。否：“橙子，梨”。换句话说，我可以让它在div中单独显示{{pList.title}，但我希望有一个字段，其中显示所有“是”选择的标题。

  <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; 
  }

});