javascript - 在 div 选择上链接 div 和文本框值

Question

我正在尝试将 div 与文本框同步。

例如，我创建了 2 个节点，即节点 1 和节点 2，当我选择节点 1 并输入标题和位置时，标题和位置应该与节点 1 同步，所以当我在选择节点 1 的同时输入标题时，标题值应该得到反射(reflect)在 node1 上，下次我选择 node1 时输入标题和位置后，标题和位置值应该反射(reflect)在我的文本框中。

我在 Fiddle 下面创建了这个来演示这个问题:http://jsfiddle.net/quk6wtLx/2/

$scope.add = function (data) {
                var post = data.nodes.length + 1;
                var newName = data.name + '-' + post;
                data.nodes.push({ name: newName, nodes: [],selected : false });
            };
            $scope.tree = [{ name: "Node", nodes: [], selected: false }];

            $scope.setActive = function (data) {
                clearDivSelection($scope.tree);
                console.log(data);
                data.selected = true;
            };

我不知道该怎么做。

Answer 1

您需要将表单元素与要附加到树的数据绑定(bind)。检查这个片段

 var app = angular.module("myApp", []);
        app.controller("TreeController", function ($scope) {
            $scope.delete = function (data) {
                data.nodes = [];
            };
            $scope.add = function (data) {
                var post = data.nodes.length + 1;
                var newName = data.name + '-' + post;
                data.nodes.push({ name: newName, nodes: [],selected : false, myObj: { name: newName} });
            };
            $scope.tree = [{ name: "Node", nodes: [], selected: false }];

            $scope.setActive = function ($event, data) {
            	$event.stopPropagation();
                $scope.selectedData = data;
                clearDivSelection($scope.tree);
                data.selected = true;
            };

            function clearDivSelection(items) {
                items.forEach(function (item) {
                    item.selected = false;
                    if (item.nodes) {
                        clearDivSelection(item.nodes);
                    }
                });
            }
        });

ul {
    list-style: circle;
}
li {
    margin-left: 20px;
}
 .active { background-color: #ccffcc;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="TreeController">
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
        <script type="text/ng-template" id="tree_item_renderer.html">
            <div ng-class="{'active': data.selected}" > {{data.myObj.name}}</div>
            <button ng-click="add(data)">Add node</button>
            <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
            <ul>
                <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'" ng-click="setActive($event, data)"></li>
            </ul>
        </script>
        <div style="margin-left:100px;">
           Title :  <input type="text" ng-model="selectedData.myObj.name" />
           Location :  <input type="text" ng-model="selectedData.myObj.location" />

        </div>
    </ul>

您可以查看 AngularJs 的绑定(bind)文档和所有可能性 https://docs.angularjs.org/guide/databinding