AngularJS:如何显示数组，如果选择了要显示的值？

在AngularJS中，如果你想根据用户的选择来显示数组中的特定值，你可以使用ng-repeat指令结合一些条件逻辑来实现。这里有几种方法可以根据用户的选择来过滤和显示数组。

方法 1: 使用 `ng-show` 或 `ng-hide`

你可以使用ng-show或ng-hide指令在ng-repeat中根据条件显示或隐藏元素。

示例代码：

假设你有一个数组和一个模型来保存用户的选择：

<div ng-controller="MyController">
  <select ng-model="selectedFruit" ng-options="fruit for fruit in fruits"></select>
  <ul>
    <li ng-repeat="fruit in fruits" ng-show="fruit === selectedFruit">
      {{ fruit }}
    </li>
  </ul>
</div>

app.controller('MyController', function($scope) {
  $scope.fruits = ['apple', 'banana', 'cherry'];
  $scope.selectedFruit = 'banana'; // 默认选择
});

在这个例子中，只有当fruit等于selectedFruit时，列表项才会显示。

方法 2: 使用过滤器 `filter`

AngularJS允许你在ng-repeat中直接使用过滤器来过滤数据。

示例代码：

<div ng-controller="MyController">
  <select ng-model="selectedFruit" ng-options="fruit for fruit in fruits"></select>
  <ul>
    <li ng-repeat="fruit in fruits | filter:selectedFruit">
      {{ fruit }}
    </li>
  </ul>
</div>

app.controller('MyController', function($scope) {
  $scope.fruits = ['apple', 'banana', 'cherry'];
});

这里，filter:selectedFruit会自动过滤数组，只显示与selectedFruit匹配的项。如果selectedFruit为空或未定义，它将显示所有项。

方法 3: 自定义过滤器

如果你需要更复杂的过滤逻辑，你可以创建自己的过滤器。

示例代码：

<div ng-controller="MyController">
  <select ng-model="selectedFruit" ng-options="fruit for fruit in fruits"></select>
  <ul>
    <li ng-repeat="fruit in fruits | customFilter:selectedFruit">
      {{ fruit }}
    </li>
  </ul>
</div>

app.controller('MyController', function($scope) {
  $scope.fruits = ['apple', 'banana', 'cherry'];
});

app.filter('customFilter', function() {
  return function(items, selected) {
    if (!selected) return items;
    return items.filter(function(item) {
      return item === selected;
    });
  };
});

在这个例子中，自定义过滤器customFilter根据选择过滤数组。如果没有选择（selected为空），它返回整个数组。