Как сохранить общую сумму между компонентами AngularJS в ngRepeat

Вот проблема: ограниченное количество лицензий может быть назначено пользователям, когда доступный номер 0 не может быть назначен, а другие кнопки будут отключены. Лицензии можно удалить и переназначить.Как сохранить общую сумму между компонентами AngularJS в ngRepeat

Список пользователей находится в цикле ngRepeat, а функция assign/remove license находится в компоненте. Когда я нажимаю кнопку назначения/удаления, он обновляет себя и общее количество, но кнопка в других компонентах не обновляется до следующего щелчка.

Вот полный код, что я до сих пор: http://plnkr.co/edit/T4soR8qpSAzY0cANknsE?p=preview

HTML-:

<body ng-controller="RootController as root"> 
    <pre>qty: {{ root.qtyAvailable }}/{{ root.qtyMax }}</pre> 
    <div ng-repeat="user in root.users | orderBy: 'firstname' "> 
     {{ user.firstname }} 
     <assign 
     has-licence="user.hasLicence" 
     reassignable="user.reassignable" 
     qty="root.qtyAvailable" 
     qty-max="root.qtyMax" 
     ></assign> 
    </div> 
</body>

Контроллер и компонент:

.controller('RootController', function() { 
    this.qtyMax = 2; 
    this.qtyAvailable = 1; 

    this.users = [ 
    {firstname: 'john', hasLicence: false, reassignable: true}, 
    {firstname: 'jane', hasLicence: false, reassignable: true}, 
    {firstname: 'joey', hasLicence: false, reassignable: true}, 
    {firstname: 'bob', hasLicence: true, reassignable: true}, 
    ]; 

}) 

.component('assign', { 
    template: `<button ng-click="$ctrl.click($ctrl.hasLicence)">{{ $ctrl.text }}</button>`, 
    controller: function() { 
    this.text = ''; 

    // set the button text 
    this.buttonText = function() { 
     if(this.hasLicence) { 
     this.text = 'remove'; 
     } 
     else if(!this.hasLicence && this.reassignable && this.qty>0) { 
     this.text = 'assign'; 
     } 
     else { 
     this.text = '-'; // eg button disabled 
     } 
    } 

    this.buttonText(); 

    // click function 
    this.click = function(licence) { 
     if(licence === true) { 
     this.hasLicence = false; 
     this.qty++ 
     } 
     else if(this.qty>0) { 
     this.hasLicence = true; 
     this.qty-- 
     } 
     this.buttonText(this.hasLicence); 
     console.log(this.qty) 
    } 

    }, 
    bindings: { 
    hasLicence: '<', 
    reassignable: '<', // not relevant for this demo 
    qty: '=', 
    qtyMax: '<' 
    } 

});

источник

2016-11-29 EdwardJPayton

Что-то вроде этого:

template: `<button ng-disabled="$ctrl.qty <= 0 && !$ctrl.hasLicence" ng-click="$ctrl.click($ctrl.hasLicence)">{{ $ctrl.text }}</button><span ng-if="$ctrl.qty <= 0 && !$ctrl.hasLicence">No licenses are free</span>`

Использование extendend синтаксис: ng-disabled="$ctrl.qty <= 0 && !$ctrl.hasLicence" только для отключения кнопок, чтобы добавить лицензию при вар «свободных лицензий,» является < = 0.

Обновлено Plunkr

источник

2016-11-29 12:33:14

удивительным, спасибо. это именно то, чего я пытался достичь – EdwardJPayton

Если вы хотите, чтобы выполнить функцию buttonText() конкретно вы можете добавить смотреть на переменную qty и выполнить его:

.component('assign', { 
    template: `<button ng-click="$ctrl.click($ctrl.hasLicence)">{{ $ctrl.text }}</button>`, 
    controller: function($scope) { // $scope injection here 

    ... 

    // Note: you can use arrow functions to omit the assignment of context 
    var me = this; 
    $scope.$watch(function() { 
     return me.qty; 
    }, function() { 
     me.buttonText(); 
    }); 

    }, 
    bindings: { 
    ... 
    } 

});

Обновлено plunker здесь: plunkr

источник

2016-11-29 12:58:35 vl4d1m1r4

Большое спасибо! Я хотел избежать инъекции $ scope (должен был поместить это в мой вопрос) – EdwardJPayton

Как сохранить общую сумму между компонентами AngularJS в ngRepeat

ответ

Смежные вопросы