0

我正在开发 AngularJS 应用程序。我想知道如何查询变量的兄弟属性。例如在我的控制器变量 car 中存在。

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

我要求用户从选择选项中选择型号，我想打印所选汽车的颜色。

<p>Select a Car</p>
<select ng-model="selectedCar">
    <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<p>Color of this car is <b style="color:{{selectedCar.color}}">{{selectedCar.color}}</b></p>

在这里，取值为 forselectedCar而x.model不是x。如何为同一变量获取modelie的兄弟属性？color

4

3 回答 3

0 

 angular.element(document).ready(function() {
      var app = angular.module('myApp', []);

      app.controller('myCtrl', ['$scope', 'store', function($scope, store) {
        $scope.search = '';
        $scope.cars = [];
        $scope.cars = store.getCars();
        $scope.filterProductsByCategory = function(category) {
          $scope.search = category;
        };
      }]);
      app.factory('store', function() {
          var cars = [
            {model : "Ford Mustang", color : "red"},
            {model : "Fiat 500", color : "blue"},
            {model : "Volvo XC90", color : "black"}
        ];
        return {
          getCars: function() {
            return cars;
          }
        };

      });

      angular.bootstrap(document, ['myApp']);
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <h2>Search Car: </h2>
    <input type="text" ng-model="search" placeholder="Search..." />
    <table cellpadding="5" cellspacing="1" border="1" style="width:100%;">
      <tr>
        <th>Model</th>
        <th>Color</th>
      </tr>
      <tr ng-repeat="car in cars | filter:search | orderBy:'name'">
        <td>{{car.model}}</td>
        <td>{{car.color}}</td>
      </tr>
    </table>
  </div>
  <div>
  </div>

于 2018-05-02T05:42:06.493 回答
0

您可以稍微更改您的模板代码，您可以这样做。

我在所选选项中添加了 Array Key 作为值，并且基于该键，您可以显示汽车的值或数组中的特定索引

<p>Select a Car</p>
<select ng-model="selectedCar">
    <option ng-repeat="(key,x) in cars" value="{{key}}">{{x.model}}</option>
</select>
<p>Color of this car is <b style="color:{{cars[selectedCar].color}}">{{cars[selectedCar].color}}</b></p>
于 2018-05-02T05:49:22.913 回答
0

使用ngOptions而不是ng-repeat迭代选项。

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.cars = [
            {model : "Ford Mustang", color : "red"},
            {model : "Fiat 500", color : "blue"},
            {model : "Volvo XC90", color : "black"}
        ];
        
    $scope.selectedModel = function(model) {
      console.log("model");
    }    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <p>Select a Car</p>
<select ng-model="selectedCar" ng-options="x.model for x in cars"></select>
<p>Color of this car is <b style="color:{{selectedCar.color}}">{{selectedCar.color}}</b></p>
</div>

于 2018-05-02T06:01:59.913 回答