Question

我有一个form具有复杂的功能（拖放，删除元素组，添加元素组），我想用Angular来处理。表单已经渲染，并设置了原始值。

<form>
    <div>
        <input ng-model="rule[0].rule" value="bar">
        <select ng-model="rule[0].value">
            <option>A</option>
            <option selected>B</option>
        </select>
    </div>
    <div>
        <input ng-model="rule[1].rule" value="foo">
        <select ng-model="rule[1].value">
            <option selected>1</option>
            <option>2</option>
        </select>
    </div>
    ...
</form>

问题是Angular会使这些值无效，并且在rule中不会创建$scope数组。我想要的是从我的模板的值创建对象数组rule。

我确实理解我的要求违反了模板提供数据的方式的MVC模式。不过，我想避免过多的数据分配。

由于

Answer 1

快速回答：不，这是不可能的。

您需要在控制器中将$ scope.rule定义为数组，然后才能在视图中开始使用它。

$scope.rule = [];

在视图中，您将无法向$scope ...

添加任何内容

Answer 2

你的表单有两个非常相似的代码和平，你可能会放更多。最好在控制器中托管所有表示，并从中构建。让我举个例子给你。

查看

<div ng-repeat="item in options">
    <input ng-model="item.rule">
    <select ng-model="item.value">
      <option ng-repeat="option in item.options" ng-value="option">{{option}}</option>
    </select>
    <span>{{item.value}}</span>
  </div>

控制器

  $scope.options = [{
    value: 'B',
    rule: 'foo',
    options: ['A', 'B']
  }, {
    value: 2,
    rule: 'bar',
    options: [1, 2]
  }];

https://jsfiddle.net/rzadc03v/

希望它会对你有所帮助！

是否可以从Angular中的视图值创建模型？

2 个答案: