Показать сообщение отдельно
  #5 (permalink)  
Старый 27.05.2013, 00:09
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Отличная идея! Пока возьму пару примеров оттуда, а потом отсюда что-нибудь туда :-)

Редактируемый древовидный список
<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script>
      angular.module("myApp", []);
 
      function TreeController($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: []});
          };
          $scope.tree = [
            {name: 'Узел', nodes: [
              {name: 'Морской', nodes: []},
              {name: 'Устричный', nodes: []}
            ]}
          ];
      };
    </script>
  </head>
  <body>
    <script type="text/ng-template"  id="item.html" ng-init="data.edit=false" >     
      <span ng-show="data.edit">
        <input type="text" value="{{data.name}}"  ng-model="data.name"/>
        <button ng-click="data.edit=false">сохр.</button>
      </span>
      <span ng-hide="data.edit">
        {{data.name}} 
        <button ng-click="data.edit=true">ред.</button>
      </span>    
      <button ng-click="add(data)">Добавить узел</button>
      <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Удалить узел</button>
      <ul>
        <li ng-repeat="data in data.nodes" ng-include="'item.html'" class="node"></li>
      </ul>
    </script>
    <ul ng-controller="TreeController">
      <li ng-repeat="data in tree" ng-include="'item.html'" class="node"></li>
    </ul>
  </body>
</html>

Последний раз редактировалось Shitbox2, 27.05.2013 в 00:46.
Ответить с цитированием