AngularJs:Ng模型对象和单个模型一起

时间:2017-02-20 13:48:45

标签: angularjs angular-ngmodel angularjs-ng-options

我没有足够的英语来形容它,但我想你会从代码中理解它。 基本上我的问题是ng-model =“”ng-options =“”在一起使用时没有提供表格数据。

<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState()" >
                                    <option value="">Select Car</option>
                                </select>

这些汽车品牌的选择框

<div class="form-group">
                                    <label class="mtb10">Model Year</label>
                                    <input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
                                </div>

这是其他表单对象。其中ng-model是不同的数据“数据”。我能得到它。如何在选择框中获取值。

我需要获得“car_id”值。

1 个答案:

答案 0 :(得分:0)

试试这个:

  • 更改下拉选项会将所选值作为参数传递给函数。
  • 使用array.filter()方法根据车辆ID获取所选汽车的model year

<强>样本

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

myApp.controller('MyCtrl',function($scope) {
    $scope.CarList = [
      {
      "car_brand_code": 1,
      "car_brand_name": "Maruti",
      "model_year": 1990
      },
      {
      "car_brand_code": 2,
      "car_brand_name": "Ford",
      "model_year": 2005
      }
    ];
    
    $scope.GetState = function(carId) {
      var selectedCar = $scope.CarList.filter(function(item) {
        return item.car_brand_code == carId;
      });
      $scope.data = {
        "modelYear" : selectedCar[0].model_year
      }
    };
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState(car_id)" >
    <option value="">Select Car</option>
  </select>
  <div class="form-group">
    <label class="mtb10">Model Year</label>
    <input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
  </div>
</div>