Question

如果我错误地说错了这个问题，我很抱歉，我正在尝试建立一个调查构建器，而我遇到了一个问题。以下是示例plunker的链接：

JS：

(function() {
    var app = angular.module('FormBuilder');

    var stageController = function($scope, componentBuilder) {

            //var test = "<div>test<button>Im a Button</button></div>";
            $scope.components = [];
            $scope.components2 = [];

            $scope.selectedComponentIndex = -1;

            //$scope.list = [{html:test}];
            //$scope.componentSettings = "";
            $scope.showComponentSettings = function(componentName, index) {
                $scope.componentSettings = componentName;
                $('#navTab a[href="#componentSettingsPage"]').tab('show');
            };
            $scope.addMultipleChoice = function() {

                var component = componentBuilder.createMultipleChoice();
                $scope.components2.push(component);
                $scope.components.push(component.name);
            };

            $scope.addTextEntry = function() {

                var component = componentBuilder.createTextEntry();
                $scope.components.push(component);
            };

            $scope.addReadOnlyTextEntry = function() {

                var component = componentBuilder.createReadOnlyTextEntry();
                $scope.components.push(component);
            };

            $scope.delete = function(index) {

                $scope.components.splice(index, 1);
            };
        };

    app.controller("stageController", stageController);

}());

HTML：

 <body>
<div ng-controller="stageController">
  <!-- div>
    <div ui-sortable="" ng-model="list">
      <div ng:repeat="item in list" class="item">
        {{item}}
        </div>
    </div>
  </div-->
  <div>
  Value of scope.inner = {{components}}
</div>
  <div style="display: table-row">
    <div ng-include="" src="'nav.html'" style="width: 300px; display: table-cell;"></div>
    <div ng-include="" src="'stage.html'" style="display: table-cell;"></div>
  </div>
</div>
<script type="text/ng-template" id="multipleChoice">
<div class="multipleChoice"></div>
</script>
<script type="text/ng-template" id="textEntry">
 <div class="textEntry"></div>
</script>
<script type="text/ng-template" id="readOnlyTextEntry">
 <div class="readOnlyTextEntry"></div>
</script>

更新的问题和示例：请查看我当前的plunker我遇到的问题。 plunker显示了一个示例表单构建器，允许用户添加各种组件来构建表单，此示例允许多选，文本输入和只读文本输入组件。

左侧导航栏包含两个选项卡，一个用于组件，另一个用于自定义设置，例如更改问题标签或向组件添加更多选项。我目前的问题是，我不知道将项目设置上的元素绑定到集合中的特定表单组件的最佳方法/实践。

因此，如果用户添加了多项选择组件，点击它，它将显示项目设置，然后能够修改该特定组件的组件设置。
我希望这更清楚，任何帮助都表示赞赏，谢谢你。

AngularJS - 如何将多个动态添加的元素绑定到HTML的不同部分中的其他元素？

0 个答案: