使用unique过滤器时，如何设置ng-options与ng-repeat的选中值？

嘿，我来帮你搞定这两个关于AngularJS的问题，结合你给出的代码一步步说明：

1. 如何在使用unique过滤器时设置ng-options的选中值 #

你的<select>通过unique:'cat'过滤器生成了去重后的分类选项，要设置默认选中值，核心是给绑定的ng-model变量（也就是$scope.query）赋一个对应的值：

• 如果想默认选中某个分类（比如Electronics），直接在控制器里给query赋值该分类的名称即可，因为ng-options的选项值就是去重后的cat值；
• 如果想默认选中你写的<option value="0">Default</option>，就给query赋值0。

修改后的控制器代码示例： #

myApp.controller('myAppList', function myAppList($scope) {
  $scope.products = [
    {'name': 'Product 1', 'cat': 'Electronics'},
    {'name': 'Product 2', 'cat': 'Electronics'},
    {'name': 'Product 3', 'cat': 'Clothing'},
    {'name': 'Product 4', 'cat': 'Home Goods'}
  ];
  
  // 示例1：默认选中Electronics分类
  $scope.query = 'Electronics';
  
  // 示例2：如果要选中Default选项，替换成下面这行
  // $scope.query = 0;
});

页面加载时，<select>就会自动选中你设置的选项，同时下方的ng-repeat列表也会自动过滤显示对应分类的产品。

2. 如何在使用unique过滤器时设置ng-repeat的选中值 #

这里分两种常见场景解释：

场景A：让ng-repeat列表默认显示对应选中分类的内容 #

这和第一个问题是联动的——只要你设置了$scope.query的初始值，ng-repeat通过filter:{cat:query}就会自动过滤并显示对应分类的产品，不需要额外操作。

场景B：在ng-repeat的列表项中设置选中状态（比如高亮某个产品） #

如果想在产品列表里默认选中某个产品（给它加高亮样式），可以这么做：

1. 在控制器里添加变量存储选中的产品名称：

// 接上面的控制器代码
$scope.selectedProduct = 'Product 1'; // 默认选中Product 1

2. 修改HTML中的ng-repeat部分，通过ng-class添加选中样式：

<ul>
  <li ng-repeat="c in products | filter:{cat:query}" 
      ng-class="{'active': c.name === selectedProduct}">
    {{c.name}}
  </li>
</ul>

3. 可选：添加对应的CSS样式

.active {
  background-color: #e0f7fa;
  font-weight: bold;
}

如果是想基于unique过滤器生成分类列表（用ng-repeat展示去重后的分类）并设置选中状态，逻辑类似：

<!-- 分类列表示例 -->
<ul>
  <li ng-repeat="c in products | unique:'cat'" 
      ng-click="query = c.cat"
      ng-class="{'active': c.cat === query}">
    {{c.cat}}
  </li>
</ul>

点击分类项时会切换query的值，同时默认选中你在控制器里设置的query对应的分类项。

内容的提问来源于stack exchange，提问作者Zulander