div选择链接div和textbox值

Question

我想与文本框同步div。

例如，我创建了2个节点，即节点1和节点2，当我选择节点1并输入标题和位置时，则标题和位置应与节点1同步，因此当我在选择节点1时输入标题时，标题值应该在我选择node1时，下一次输入标题和位置后，标题和位置值应反映在我的文本框中，然后在node1中反映出来。

我创造了下面这拨弄来演示该问题：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

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

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) { 
 
      \t $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和约束力的文件做好一切准备https://docs.angularjs.org/guide/databinding