Question

我的应用程序中有多个下拉列表，它们通过控制器中给出的json（基本上是一个映射）填充。

对于第一次下拉菜单，如果我选择xyz值，那么相应的xyz1值应该会进入下拉列表，类似地会显示第三个下拉列表。这一切目前都很好。但现在我希望这些用户选择的值以json格式输入，以便我可以发送回后端进行进一步处理。如果我在控制台上打印，我没有获得选定的值，但错误的第二个下拉值。

codepen和

working plunker

Answer 1

您的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：如果您使用棱角分明的方式找出答案，请在将答案部分发布后告诉我。

Answer 2

我知道您需要从动态输入元素中获取值。为此，您需要将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

AngularJS下拉列表选择的值需要为JSON

2 个答案: