Как скопировать элемент по клику на Angular?

Question

[westdp]

Ребята привет, подскажите начал изучать angular и решил сразу практиковать его, выбрал сделать на подобии калькулятора калорий
Подскажите как мне сделать чтобы при клике на элемент c фильтром(левая колонка), он копировался в правую колонку
Рабочий пример: angular.andriyboyko.com

function SearchCtrl($scope, $filter)
{
    $scope.items = [
        {kkal:405, name:'Apple'},
        {kkal:195, name:'Orange'},
        {kkal:105, name:'Banana'},
        {kkal:155, name:'Cherry'},
        {kkal:65, name:'Melon'},
        {kkal:125, name:'Kiwi'},
        {kkal:80, name:'Lime'},
        {kkal:140, name:'Lemon'},
        {kkal:120, name:'Mango'},
        {kkal:40, name:'Olive'},
        {kkal:210, name:'Plum'},
        {kkal:310, name:'Ebony'},
        {kkal:50, name:'Pineapple'}];
    
    $scope.items2 = $scope.items;
    
    $scope.$watch('search', function(val)
    { 
        $scope.items = $filter('filter')($scope.items2, val);
    });
};

Спасибо за любую помощь.

Answer 1

[Сергей Протько]

1) по ngClick вызываем какой-то метод контроллера
2) в методе контроллера меняем состояние (айтем из одного массива перекидываем в другой или копируем или что вам там надо сделать).
3) вьюшка волшебным образом перестраивается сама по изменению состояния данных, слава декларативности!

Короч суть в том, что в ангуляре вы должны мыслить данными и управлением состоянием вашего приложения. А "элементы" - вы просто в шаблонах декларативно опиываете как должен реагировать UI на изменения. Например ngRepeat описывает как выводить айтем коллекции, это не тоже самое что цикл.

Comments

[westdp]

Можете пожалуйста второй пункт чуть детальней рассказать. Спасибо

Answer 2

[PerfectLab]

Что можно сделать вашим примером:
В ng-click можно передавать текущий элемент ng-click="CopySearchItem(item)". В методе CopySearchItem можно как угодно обрабатывать элемент, в том число скопировать в другой массив с даными:

$scope.newArray = [];
    $scope.CopySearchItem = function(item) {
        var newItem = angular.copy(item);
        $scope.newArray.push(newItem);     
    }

Данные из $scope.newArray выводим в правой колонке.

Comments

[westdp]

Спасибо)