angularjsの条件付きチェックボックス

設定のための角流星ページを作成しました。その設定ページではメニューが表示され、メニューが選択されるとホームページに表示されます。チェックを外すと、ダッシュボードから削除されます。コードは、クライアント側のJS `angular.module（ 'デモ'）でangularjsの条件付きチェックボックス

ある。ディレクティブ（ 'generalSettings'、関数（）{

return { 
    restrict: 'E', 
    templateUrl: 'client/lms/general-settings.html', 
    controllerAs: 'generalSettingsCtrl', 
    controller: function($scope, $reactive, $stateParams, $mdDialog, $state, $mdToast, ToastService, $timeout, $q, $log, errorValidatorUtil, CurrentPage) { 
     $reactive(this).attach($scope) 
     let self = this; 
     let user = Meteor.user(); 
     let userId = Meteor.userId(); 
     let customerId = [userId] 
     self.subscribe('getCustomerDetails',() => [customerId], { 
      onReady: function() { 
       self.helpers({ 
        currentUser:() => { 
         return Meteor.users.findOne({ 
          _id: Meteor.userId() 
         }); 

        } 
       }) 
      } 
     }); 
     // console.log(Meteor.users.findOne({ 
     //  _id: Meteor.userId() 
     // })) 

     self.data = {}; 
     self.data.cb1 = true; 
     self.isChecked = true; 
     CurrentPage.setTitle('Settings'); 
     self.subscribe('generalSettingsDetails',() => [], { 
      onReady: function() { 
       self.helpers({ /// helpers to make it reactive 
        generalSettings:() => { 
         let settings = GeneralSettings.find({}).fetch() 
          //var subSettings = [] 
         for (key in settings) { 

          delete settings[key].$$hashKey 

         } 
         console.log(settings) 
         return { 
          'generalSetting': settings 
         }; 
        } 
       }) 
      } 


     }); 
     self.getClicked = (dynamicSetting, settingId, detail) => { 
      self.dataArry = {}; 
      self.dataChk = {}; 

      self.generalSetting = {}; 


      console.log(self.generalSettings.generalSetting) 


      Meteor.call("updateStatus", detail, function(error, result) { 
       if (error) { 

        ToastService.getToastbox($mdToast, 'Something went error!Unable to add details', 'error-toast'); 
       } else { 
        self.generalSetting = {}; 

        ToastService.getToastbox($mdToast, 'Details added successfully !', 'success-toast'); 

       } 
      }); 


     } 

    } 
}

}）とサーバJS like`Meteorあります。方法（{ UpdateStatusを：（設定場合関数（設定、ステータス）{ が_ids = [] にconsole.log（設定）を聞かせ$$ハッシュキー）削除設定$$ハッシュキー

GeneralSettings.update({ 
     _id: settings._id 

    }, { 
     $set: { 
      "status": settings.status 
     } 
    }, { 
     "multi": true 
    }) 
}

}）

とhtml iは、ID、名前、説明、タグ、ステータスなどのフィールドを持つ設定のMongoのコレクションを有する

<div layout="column" layout-wrap layout-padding layout-fill class="littleWhiteFrame" ng-cloak> 
<div> 
    <div layout="row" class="requestDetailElems"> 
     <h4 class="md-subhead" layout-marginSettings> Settings</h4> 
     <span flex></span> 
    </div> 
</div> 
<md-divider></md-divider> 
<div layout="row"> 
<fieldset class="standard"> 
    <div layout-gt-sm="row" ng-repeat="detail in generalSettingsCtrl.generalSettings.generalSetting"> 
     <md-checkbox aria-label="Checkbox 1" ng-model="detail.status" ng-change="generalSettingsCtrl.getClicked(generalSettingsCtrl.detail[$index],currentUser._id,detail)"> 

       <p> {{detail.name}} {{ detail.data.cb1 }}</p> 
     </md-checkbox> 
    </div> 
    </fieldset> 
</div>

ようなものです。

メニューを選択すると、ステータスがtrueに変更されます。

このコードでいくつかの変更を加えたいと思います。ユーザーごとに異なるメニューを作成したいと思います。だから私は選択したメニューをプッシュしなければならないユーザーのコレクションです。例：user1、user2 user1が家を選択した場合、彼のダッシュボードの家やaboutusの設定から私たちについて調べる必要があります。ユーザー2が自宅と評価を選択した場合、彼は自宅にログインし、あなたの功績は自宅とおしゃべりではなく表示する必要があります

出典

2016-04-18 Aysha Azura