Question

我正在开发一个AngularJS项目。我有一个表单，用户可以选择添加多对（键，值）。

想象一下，键是输入框的标签，用户可以从下拉列表中选择标签的值（键）。

值是用户在输入框中输入的值。因此，这意味着，密钥和值都由用户动态决定。

以下是我的尝试：

$scope.optionArray = [];
$scope.addOption = function(key, value) {
    var temp = {};
    temp[key] = value;
    optionArray.push(temp);
}

我正在使用ng-repeat在html文件中显示optionArray的内容。在html文件中，我有一个按钮，可以为对添加一个选项，如：

<button type="button" 
        data-ng-click="addOption(???, ???)">Add Options
</button>
<div ng-repeat="option in optionArray">
    <label>
        <select ng-model=option.???>
            <option>...</option>
        </select>
        <input ng-model=option.???>
    </label>
</div>

我真的很困惑，因为有很多动态的作品。全部???是我不知道该放什么的地方。

总之，我希望用户动态地向表单添加一个键，配对值，并且他们可以在最终提交表单之前编辑他们想要的那些键对值。我怎么能这样做？

Answer 1

我认为你可能会使这个问题过于复杂。看起来您需要做的就是动态添加键/值对，然后给自己选择在提交之前修改每个键的键和值。

目前看来，您的嵌套下拉菜单不允许您轻松重新选择要修改的选项。

编辑：已更新为使用静态密钥列表：

工作plunker。

模板：

<body ng-app="app">
    <div ng-controller="OptionsCtrl">
      <label>Key</label>
      <select ng-model=tempOption.key>
        <option ng-repeat="key in keys">{{key}}</option>
      </select>

      <label>Value</label>
      <input type="text" ng-model="tempOption.value" />

      <button type="button" 
        data-ng-click="addOption()">Add Options
      </button>
      <div ng-repeat="option in optionArray | orderBy:'key'">
        <label>Key</label>
        <input type="text" ng-model="option.key" />

        <label>Value</label>
        <input type="text" ng-model="option.value" />
      </div>

      <h4>Current Data</h4>
      <div ng-repeat="option in optionArray | orderBy:'key'">
        <label>Key:</label>
        <label ng-bind="option.key"></label>

        <label>Value:</label>
        <label ng-bind="option.value"></label>
      </div>
    </div>
</body>

控制器：

var app = angular.module('app', []);
app.controller('OptionsCtrl', ['$scope', function($scope) {
  $scope.tempOption = {};
  $scope.keys = ['key1', 'key2', 'key3'];
  $scope.optionArray = [];
  $scope.addOption = function() {
    var temp = {
        key: $scope.tempOption.key,
        value: $scope.tempOption.value
    };
    $scope.optionArray.push(temp);
    $scope.tempOption = {};
  }
}]);

Answer 2

<button type="button" data-ng-click="addOption()">Add Options</button>

<div ng-repeat="option in optionArray">
     <input type="text" ng-model="option.key">
     <input type="text" ng-model="option.value">
</div>

$scope.optionArray = [];
$scope.addOption = function() {
    var temp = {
        key:null,
        value:null
    };
    optionArray.push(temp);
}

动态地将键对值添加到$ scope变量并使用label和input绑定它们

2 个答案: