AngularJS如何查询变量的兄弟属性？（车型选后联动颜色场景）

嘿，这事儿其实超简单！核心就是让你的下拉选框直接绑定到cars数组里的整个对象，而不是只绑定车型名称，选中后就能直接拿到对应的颜色属性啦！

第一步：完善下拉选框的写法 #

你需要用ng-options指令来遍历cars数组，把每个车型对象绑定到selectedCar上——这比手动用ng-repeat生成<option>更规范，也更省心。

完整的HTML代码示例：

<div ng-app="rootApp" ng-controller="Option2">
  <p>Select a Car</p>
  <!-- 用ng-options把整个car对象绑定到selectedCar -->
  <select ng-model="selectedCar" ng-options="car.model for car in cars">
    <!-- 加个默认空选项更友好 -->
    <option value="">请选择车型</option>
  </select>

  <!-- 联动显示选中车型的颜色，用ng-if避免初始显示空值 -->
  <div ng-if="selectedCar">
    <p>所选车型的颜色：{{ selectedCar.color }}</p>
  </div>
</div>

第二步：控制器代码保持原样就行 #

你的控制器代码已经没问题了，完全不用修改：

rootApp.controller('Option2', function($scope){ 
  $scope.cars = [ 
    {model : "Ford Mustang", color : "red"}, 
    {model : "Fiat 500", color : "blue"}, 
    {model : "Volvo XC90", color : "black"} 
  ]; 
});

为啥这样能行？ #

当用户选了某个车型时，selectedCar会直接变成cars数组里对应的那个完整对象——比如选中"Ford Mustang"，selectedCar就是{model : "Ford Mustang", color : "red"}，所以直接用{{ selectedCar.color }}就能拿到颜色值，根本不用额外去数组里查兄弟属性~

要是你之前用的是ng-repeat写<option>（比如<option ng-repeat="car in cars" value="{{car.model}}">{{car.model}}</option>），那selectedCar只会拿到车型名称字符串，这时候就得手动遍历数组找颜色，比如在控制器加个方法：

$scope.getCarColor = function(model) {
  var targetCar = $scope.cars.find(car => car.model === model);
  return targetCar ? targetCar.color : '';
}

然后HTML里用{{ getCarColor(selectedCar) }}显示，但这种方法不如直接绑定整个对象简洁，所以优先推荐ng-options的方式哦！

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