Question

我正在构建小型Angular（1.5）应用程序，其中包含两个链接的下拉菜单。第二个根据第一个下拉菜单更改其选项。这一切都很好，期待一个小细节。在HTML选项标记内，属性值等于object：[some number]而不是值本身。显示正确显示值（<option>和</option>标记之间的值）。检查屏幕截图。如何使value=""等于在开始和结束标记之间显示的相同值？

HTML文件：

<div ng-app="App" ng-controller="app-controller">
  <select id="brand"
    ng-model="input.selected_brand"
    ng-options="a for (a,b) in data"
  >
    <option value="" disabled selected>Selection 1</option>
  </select>

  <select id="model"
    ng-model="input.selected_model"
    ng-options="a.model for a in input.selected_brand"
  >
    <option value="" disabled selected>Selection 2</option>
  </select>
</div>

JS档案：

var App = angular.module("App", [])
.controller('app-controller',function($scope,$http){
  // Fetch JSON data
  $http.get('data/data.json').then(function(res){
    $scope.data = res.data;
    $scope.selected_brand = $scope.data;
  });
});

JSON文件：

{
  "BMW" : [
    {
      "model" : "M3 CRT"
    },
    {
      "model" : "M5"
    },
    {
      "model" : "M3 GTS"
    },
    {
      "model" : "M3 Coupe DCT"
    },
    {
      "model" : "M3 F80"
    },
    {
      "model" : "M6 Coupe"
    },
    {
      "model" : "M5/M6 CP"
    },
    {
      "model" : "X5/X6 M"
    },
    {
      "model" : "M6 Gran Coupe"
    },
    {
      "model" : "M3 E30"
    }
  ],
  "Mercedes" : [
    {
      "model" : "SL 65 AMG"
    },
    {
      "model" : "600 Pullman"
    },
    {
      "model" : "C111"
    },
    {
      "model" : "190E 2.5-16 EII"
    },
    {
      "model" : "SLR McLaren Stirling Moss"
    },
    {
      "model" : "Patent-Motorwagen"
    },
    {
      "model" : "500E"
    },
    {
      "model" : "CLK GTR"
    },
    {
      "model" : "300 SL"
    }
  ],
  "Lamborghini" : [
    {
      "model" : "Espada"
    },
    {
      "model" : "Jalpa"
    },
    {
      "model" : "Urraco"
    },
    {
      "model" : "Reventon"
    },
    {
      "model" : "Gallardo"
    },
    {
      "model" : "Sesto Elemento"
    },
    {
      "model" : "Diablo"
    },
    {
      "model" : "Countach"
    },
    {
      "model" : "Veneno"
    },
    {
      "model" : "Miura"
    }
  ],
  "Audi" : [
    {
      "model" : "RS2"
    },
    {
      "model" : "TT"
    },
    {
      "model" : "Le Mans"
    },
    {
      "model" : "R18 E-Tron"
    },
    {
      "model" : "Union Type D"
    },
    {
      "model" : "RS6 Avant"
    },
    {
      "model" : "Horch 26/65"
    },
    {
      "model" : "DKW Monza"
    },
    {
      "model" : "R8"
    },
    {
      "model" : "Quattro"
    }
  ],
  "Ford" : [
    {
      "model" : "Mustang Byllitt"
    },
    {
      "model" : "Boss 429"
    },
    {
      "model" : "SVT Cobra"
    },
    {
      "model" : "Fairlane Thunderbolt"
    },
    {
      "model" : "Focus RS"
    },
    {
      "model" : "Falcon 351"
    },
    {
      "model" : "Ford Mustang"
    },
    {
      "model" : "Cobra R"
    },
    {
      "model" : "Shelby GT350"
    },
    {
      "model" : "Ford GT"
    }
  ],
  "Honda" : [
    {
      "model" : "S200 CR"
    },
    {
      "model" : "Jackson Turbo"
    },
    {
      "model" : "Accord Coupe"
    },
    {
      "model" : "Civic Si"
    },
    {
      "model" : "Prelude VTEC"
    },
    {
      "model" : "Civic Mugen"
    }
  ],
  "Mazda" : [
    {
      "model" : "Mazda Carol"
    },
    {
      "model" : "Rotary Pickup"
    },
    {
      "model" : "Atenza"
    },
    {
      "model" : "Savanna"
    },
    {
      "model" : "RX-8"
    },
    {
      "model" : "Eunos Cosmo"
    },
    {
      "model" : "Autozam AZ-1"
    },
    {
      "model" : "Cosmo L10B"
    },
    {
      "model" : "MX-5 Miata"
    },
    {
      "model" : "RX-7"
    }
  ]
}

我之所以这样做是因为我有

  $scope.submit = function(input){
    $scope.input_data = angular.copy(input);
    console.log($scope.input_data);
  }

需要正确的值才能正常工作，在当前状态下，console.log输出如下所示：

Object { selected_brand: Array[10], selected_model: Object }

Answer 1

我相信你想做的是：

    <select id="brand"
    ng-model="input.selected_brand"
    ng-options="a as a for (a,b) in data"
  >
    <option value="" disabled selected>Selection 1</option>
  </select>

  <select id="model"
    ng-model="input.selected_model"
    ng-options="a.model as a.model for a in data[input.selected_brand]"
  >
    <option value="" disabled selected>Selection 2</option>
  </select>

此外，您不必担心生成的代码中的值，因为angularjs在内部使用它来进行一些引用。真正重要的是传递给模型的实际价值。

ng-options值等于对象而不是值字符串

1 个答案: