Выбор цепей с помощью Angular JS

Question

Выбор цепей с помощью Angular JS

0

Я совершенно новый, просто экспериментирую, с платформой AngularJS. Поэтому я не уверен, что подход, который я принял, является лучшим/правильным способом.

Я пытаюсь создать 3-х уровневые прикомандированные ячейки ajax, и это вроде работает, за исключением нескольких проблем.

В моем фактическом коде используется ajax, который находится на заводе, но для скрипта у меня просто есть контроллер, возвращающий результаты из массива.

Демо (с использованием массивов, а не ajax): http://jsfiddle.net/xxwe1zu8/1/

Вопросы:

Выбор 2-го и 3-го уровней не имеет атрибута "selected", т.е. тот, который вы выбрали, не выделяется.
В идеале я хотел бы, чтобы категории верхнего уровня динамически заполнялись при загрузке страницы через ajax (или в этом примере по массиву), используя ту же угловую функцию (например: getSubcategories = function (0, 0) {), а не жестко закодированную. Категории верхнего уровня имеют родительский элемент 0.

Бонус: может ли отображаться/отображаться 3-е поле выбора, если есть категория подкатегорий, возвращенная после выбора подкатегории? В действительности большинство подкатегорий не будут иметь подкатегорий.

var myAppModule = angular.module('myApp',[]);
myAppModule.controller('SearchCtrl', function($scope) {
var self = this;

self.subCategories = [];
self.getSubcategories = function(parent, level) {

    theCategories = [];

        angular.forEach(sub_category[parent], function(idx, val) {
             theCategories.push({id: val, name: idx});
        });


    self.subCategories[level] = theCategories;
}       
});

благодаря

Martin 28 июль 2015, в 04:06

Источник

0

Есть ли причина иметь непостоянные индексы для массива категорий?
Kirill Slatin 28 июль 2015, в 03:18

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Есть ли причина иметь непостоянные индексы для массива категорий?

Kirill Slatin · Answer 1 · 2015-07-28T00-56-00.000Z

Я бы предложил реструктурировать данные в массив объектов и избавиться от указаний, которые, по-видимому, здесь бесполезны.

var transport = [
    {
        name: "Cars",
        models: [
            {
                name: "Hatchback",
                variations: ["4 door", "5 door"]
            },
            {
                name: "Sedan",
                variations: ["4 door", "5 door"]
            },
            {
                name: "SUV",
                variations: ["Medium", "Large"]
            }
        ]
    },
 ...

Это позволяет сделать более четкий код в шаблоне. Я не являюсь синтаксисом ControllerAs, так как $scope вводится каким-либо образом. И это лучший подход, если вы только начнете изучать AngularJS

    <select 
         ng-model="selectedType" 
         ng-options="t.name for t in transport"
         ng-change = "selectedModel=null;selectedVariation=null">
         <option value="">Select type</option>
    </select>

    <select 
         ng-model="selectedModel" 
         ng-options="model.name for model in selectedType.models"
         ng-change="selectedVariation=null" 
         ng-show="selectedType.models">
        <option value="">Select model</option>
    </select>

    <span ng-show="loading">Loading...</span>
    <select 
         ng-model="selectedVariation" 
         ng-options="variation for variation in variations"
         ng-show="variations && !loading">
        <option value="">Select variation</option>
    </select>

selectedType, selectedModel и selectedVariation неявно определяются в $scope по ng-model каждого select. В настоящее время даже нет упоминания о них в контроллере. В то же время эти свойства используются в ng-show чтобы скрыть теги select которые не актуальны в текущем выборе.
Последний select (подкатегория) демонстрирует способ получения данных асинхронно. Представьте себе, что у вас нет полного дерева данных сразу и выбор вариантов с сервера при выборе модели. Вы бы поставили часы в контроллере для selectedModel и если он был выбран (не опустошен), вы запустили запрос на данные и обновили варианты ответа

$scope.$watch('selectedModel', function(model){
    if(model){
        $scope.loading = true;
        //setTimeout imitates an ajax request
        setTimeout(function(){
            $scope.variations = model.variations;
            $scope.loading = false;
            $scope.$apply();
        }, 1000);
    }
})

Обновленная скрипка

Вы можете добавить его как свойство id объекта, что является более распространенным способом в javascript. Смотрите обновленный ответ для асинхронной загрузки дерева данных
Спасибо, я вроде понимаю, как вы это сделали, но не уверен, как перейти от плоской таблицы БД (которая уже существует и которую мне нужно использовать) с помощью specs = [id, name, parent_id] через ajax к вашему "вар транспорт" путь.
..... То, как я пытаюсь это сделать, использует идентификатор из таблицы DB в качестве значения в "<option value = ..." выбора, который мы затем используем onclick для поиска дочерних категорий через ajax.
Ну, в любом случае, вы знаете, как разбирать плоскую схему, которая у вас есть, в дерево. То, как отображаются variations , дает представление о том, как вы это делаете. Вам нужно будет получить id выбранной модели и сервер запросов для всех вариантов этой модели.