AngularJS 下拉选择的值需要作为 JSON

Question

我的应用程序中有多个下拉菜单，这些下拉菜单通过控制器中给出的 json（基本上是地图）填充。

对于第一个下拉列表，如果我选择 xyz 值，则对应的 xyz1 值应该出现在下拉列表中，第三个下拉列表也类似。目前这一切都很好。但现在我希望这些用户选择的值以 json 形式获取，以便我可以发送回后端进行进一步处理。如果我在控制台上打印，我没有得到选择的值，而是错误的第二个下拉值。

codepen 和

working plunker

Answer 1

我了解您需要从动态输入元素中获取值。为此，您需要将 ng-model 设置为输入元素，而不是 div。

以下更新的部分会有所帮助。

<div ng-init="pageObjectName.pageObjParam={}" ng-repeat="(key , value) in pageObjectName.pageObjMethod">
    <input ng-model='pageObjectName.pageObjParam[key]' value='' placeholder="{{key}} - {{value}}"></input>
</div>

现在您可以从 $scope.pageObjectName.pageObjParam 获取这些值。

Updated Plunker

编辑

我希望以上部分有助于从动态输入字段中获取价值。现在我建议您更新如下代码块以从下拉列表中获取选定的值（即，为每个选择使用一个隐藏的输入字段），您将得到您想要的。

 <select id="pageObj" ng-model="pageObjectName.pageObj" ng-options="key for (key,value) in pageData" ng-change="pageObjectName.pageObjParam.pageObj=pageObjectName.pageObj">
    <option value=''>Select Page Object</option>
    </select>
 <input ng-model='pageObjectName.pageObjParam.pageObj' hidden/>

You can have a look at the same plunker now

Answer 2

您的 codepen 似乎令人困惑且无法正常工作。由于您已经实现了下拉菜单，我将从这里继续介绍如何从下拉菜单中获取数据并将数据转换为 JSON。

从下拉列表中获取数据后，创建一个 JSON 对象并存储它。 我写了一个小例子来展示如何存储数据。

 $scope.selectedState = function(item) {
      var output = {};
      output.name = item.name;
      $scope.viewOutput = output;
    };  

更新：

我很努力，但无法使用角度方式获取值。如果您仍在寻找答案，那么我们可以使用基本的 javascript 方式。请参考 plunker。

$scope.submitMyForm = function() {
      /* while compiling form , angular created this object*/
      var pgObj = $scope.pageObj;
      var pgClass = $scope.pageClass;
      var pgMethod = $scope.pageObjMethod;

      var pgObjvalue = document.getElementById('pageObj').value;
      var pgClassvalue = document.getElementById('pageClass').value;
      var pgMethodvalue = document.getElementById('pageMethod').value;

      $scope.output = {'object' : pgObjvalue, 'class': pgClassvalue, 'method': pgMethodvalue};
      console.log(data);
    };

工作Plunker。

P.S：如果您使用角度方式找到答案，请在答案部分发布后告诉我。