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