Показать сообщение отдельно
  #9 (permalink)  
Старый 07.10.2013, 14:16
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Блять, сначало написал код, потом заметил что чувак не юзает ангуляр.

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    
  </head>
  <body>
    <div ng-controller="Controller">                  
      <h2 >Магазинчег</h2>
      <div>

          <div>
              <label>Одежда</label>
              <select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select>
          </div>
        
          <div>
              <label>Размер модели</label>
              <select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select>
          </div>        

    </div>
      <img src="{{img}}"/>
      
      <script>
        function Controller($scope) {
        
            var groups = [
                {
                	"Id": "1",
                    "Name": "Белое платье сшитое эльфами  ",
                    "Items": [
                        {
                            "Id": "1",
                            "Name": "Большое",
                          "img":"http://javascript.ru/forum/image.php?u=17434&dateline=1322593884f"
                        }, {
                            "Id": "2",
                            "Name": "Маленькое",
                            "img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"                          
                        }, {
                            "Id": "3",
                            "Name": "Среднее",
                            "img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
                        }, {
                            "Id": "4",
                            "Name": "XXL Для жиртресток",
                        	"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
                        }
                    ]
            	}, {
                	"Id": "2",
                    "Name": "Куртка из кожи с жопы дракона",
                    "Items": [
                        {
                            "Id": "5",
                            "Name": "Для детей",
                            "img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
                    	}, {
                        	"Id": "6",
                        	"Name": "Для карликов",
                        	"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"                          
                    	}, {
                        	"Id": "7",
                        	"Name": "Для гномов",
                        	"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
                    	}
                    ]
            	}];
        	
            $scope.groups = groups;                            // Все товары
            $scope.currentGroup = groups[0];                   // Выбранные товар
            $scope.currentItems = $scope.currentGroup.Items;   // Все размеры
            $scope.currentItem = $scope.currentItems[0];       // Выбраный размер

            //Следим за изменением товара
            $scope.$watch('currentGroup', function () {
                $scope.currentItems = $scope.currentGroup.Items;
                $scope.currentItem = $scope.currentGroup.Items[0];

            });

            //Следим за изменением размера
            $scope.$watch('currentItem', function () {
              	$scope.img = $scope.currentItem.img;          
            })
                    	
        }
      </script>
      
    </div>
  </body>
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 07.10.2013 в 14:47.
Ответить с цитированием