Thiết kế website giá rẻ

Question

i am working on a ServiceNow custom widget in which i am getting all the data from backed in an array. i want that if user doesn’t checked any checked boxes the next button should be disabled. if user checked any one of the boxes the net button should be enable using ng-disable or ng-if.
HTML

<style>

  .modal-body {
    max-height: calc(100vh - 300px);
    overflow-y: auto !important;
  }

</style>
<div class="modal-header">

  <!-- Prodcuts -->
  <div ng-if="!categoryTemplate">
    <div class="d-flex flex-wrap justify-content-center" >

      <div class="stepper width-40-product">
        <div class="stepper-buttons">

          <span class="step active">
            <div class="step-circle">1</div>
            ${Products}</span>
          <span class=" step  m-b-lg line"></span>
          <span class="step" >
            <div class="step-circle">2</div>${Notifications}</span>
        </div>
      </div>

      <a class="close position-absolute right-0 m-r" data-dismiss="modal" ng-click="c.closeTaskPopup($event)" aria-label="{{data.messages.CLOSE}}" >
        <img src="amd-close.svg">
      </a>

    </div>
    <div class="d-flex justify-content-center font-weight-500 h4">
      ${Select the Amadeus products you want to be notified about}
    </div>
    <div class="d-flex padder-v-xs justify-content-center">
      <form ng-submit="c.searchFunction()" class="d-flex overflow-hidden border-1p border-radius-4p wrapper-xs width-40-product-search gap-2">

        <input type="text" placeholder="Search products" class="no-border modal-open text-md w-100 " name="search" id="searchid" ng-model="c.productSearchTerm" role="textbox">
        <button type="submit" id="sbtn" class="no-border no-bg padder-r-none padder-l-none">
          <i class="fa fa-search"></i>
        </button>
      </form>
    </div>

  </div>

  <!-- Category -->
  <div ng-if="categoryTemplate">
    <div class="d-flex flex-wrap justify-content-center" >

      <div class="stepper width-40-product">
        <div class="stepper-buttons">
          <span class="step completed">
            <i class="step-circle fa"></i>
            ${Products}</span>
          <span class=" step  m-b-lg line"></span>
          <span class="step active" >
            <div class="step-circle">2</div>${Notifications}</span>
        </div>
      </div>

      <a class="close position-absolute right-0 m-r" data-dismiss="modal" ng-click="c.closeTaskPopup($event)" aria-label="{{data.messages.CLOSE}}" >
        <img src="amd-close.svg">
      </a>
    </div>

    <div class="d-flex justify-content-center font-weight-500 h4">
      ${Manage your product notifications}
    </div>

    <div class="d-flex padder-v-xs justify-content-center font-weight-400">
      ${Choose the updates you want to receive(news,articles..) related to your Amadeus products.}
    </div>
  </div>

</div>

<div class="modal-body">

  <!-- Prodcuts -->
  <div class="d-flex gap-8 align-items-center m-t-xs m-b" ng-if="!categoryTemplate">
    <span> <input ng-checked="c.onLoadSelectAllSPCheckBox" type="checkbox" ng-model="c.onLoadSelectAllSPCheckBox" ng-click="c.selectAllProducts()"/></span>
    <span>${Select all}</span>
  </div>

  <div class=" d-flex flex-wrap  flex-row gap-10 align-items-stretch" ng-if="!categoryTemplate">
    <div class="border-1p wrapper height-min-60px d-flex-flex-0-32p overflow-wrap-break" ng-repeat="prod in data.listSPAvailable | filter:productSearch">
      <div class="d-flex gap-8 align-items-center overflow-wrap-break">
        <span> <input ng-checked="prod.flag" type="checkbox" ng-model="prod.flag" ng-click="c.toggleSPAll()" /></span>
        <span class="overflow-wrap-break">{{prod.name}}</span>
      </div>
    </div>
  </div>

  <!-- Category -->
  <div ng-if="categoryTemplate" ng-include="'amd-notification-subscription-categories'"></div>

</div>

<div class="modal-footer">

  <!-- Prodcuts -->
  <div ng-if="!categoryTemplate">
    <button class="btn btn-outline-primary"  ng-click="c.closeTaskPopup($event)"  >
      ${Cancel}
    </button>
    <button class="btn btn-primary"   ng-click="c.toggleWindow()"  >
      ${Next}
    </button> 
  </div>

  <!-- Category -->
  <div ng-if="categoryTemplate">

    <button class="btn btn-outline-primary" ng-click="c.toggleWindow()" >
      ${Previous}
    </button>
    <button class="btn btn-primary" ng-click="c.updateNotifications()" >
      ${Complete}
    </button> 
  </div>

</div>

Client Script

api.controller=function($scope, $uibModal , spUtil) {
    /* widget controller */
    var c = this;
    var modal = null;
    c.onLoadSelectAllSPCheckBox = false;
    c.onLoadCategorySeelectAll = false;

    $scope.filteredSPItems = '';

    $scope.categoryTemplate = false;
    c.productSearchTerm = '';

    $scope.productSearch = {};
    $scope.productSearch.name = '';


    $scope.myFilter = function(item){
        return item.flag == true;
    }

    c.searchFunction = function(){
        $scope.productSearch.name = c.productSearchTerm;
    }

    c.startPreferences = function(){
        c.editPreferences();
    }

    c.editPreferences = function(){
        modal = $uibModal.open({
            scope: $scope,
            templateUrl: 'amd-notification-subscription-products',
            keyboard: true,
            backdrop: 'static',
            controller: function($scope) {

            }
        });
    }

    c.closeTaskPopup = function(e) {
        if (e) {
            e.stopPropagation();
            e.preventDefault();
        }
        modal.dismiss({
            $value: "dismiss"
        });
        c.clearValue();
        c.getOnLoadData();
    }

    c.updateNotifications = function(){
        $scope.loadingData = true;
        var data = $scope.data;
        data.action = 'update_products';
        data.listSelectedSP = data.listSPAvailable;
        data.listSelectedCat = data.listCateAvailable;

        $scope.server.update().then(function(response) {
            c.closeTaskPopup();
            c.clearValue();
            spUtil.addInfoMessage(response.resp);
            $scope.loadingData = false;
        });
    }

    c.toggleWindow = function(){
        $scope.categoryTemplate  = $scope.categoryTemplate  ? false : true;
        $('.modal-body').scrollTop(0);
    }

    // Makes Widget Async
    $scope.data = $scope.options;
    $scope.loadingData = true;
    $scope.server.update().then(function() {
        $scope.loadingData = false;
        c.getOnLoadCategorySeelectAll();
        c.toggleSPAll();
        c.onToggleFlagSet();
    });

    c.clearValue = function(){
        $scope.categoryTemplate = false;
        c.onLoadSelectAllSPCheckBox = false;
        c.productSearchTerm = '';
        $scope.productSearch.name = '';
        c.onLoadCategorySeelectAll = false;
        $scope.data.action = "";
        c.getOnLoadCategorySeelectAll();
        c.toggleSPAll();
        c.onToggleFlagSet();
    }

    c.selectAllProducts = function(){

        if(c.onLoadSelectAllSPCheckBox){
            for(var i=0; i < $scope.data.listSPAvailable.length; i++){
                $scope.data.listSPAvailable[i].flag = true;
            }
        }else{
            for(var j =0; j < $scope.data.listSPAvailable.length; j++){
                $scope.data.listSPAvailable[j].flag = false;
            }
        }

    }

    c.toggleSPAll = function(){
        var count = 0;
        for(var i in $scope.data.listSPAvailable){
            if($scope.data.listSPAvailable[i].flag == true){
                count++;
            }
        }

        c.onLoadSelectAllSPCheckBox = (count == $scope.data.listSPAvailable.length) ? true : false;
    }

    c.getOnLoadData = function(){
        $scope.loadingData = true;
        var data = $scope.data;
        data.action = 'onLoad_data';

        $scope.server.update().then(function(response) {
            c.clearValue();
            $scope.loadingData = false;
            c.getOnLoadCategorySeelectAll();
            c.toggleSPAll();
            c.onToggleFlagSet();
        });
    }


    c.getOnLoadCategorySeelectAll = function(){
        var count = 0;
        for(var i in c.data.listCateAvailable){
            if(c.data.listCateAvailable[i].flag == true){
                count++;
            }
        }

        c.onLoadCategorySeelectAll = (count == c.data.listCateAvailable.length) ? true : false;
    }


    c.toggleCateAll = function(){

        if(c.onLoadCategorySeelectAll){
            for(var i=0; i < $scope.data.listCateAvailable.length; i++){
                $scope.data.listCateAvailable[i].flag = true;
            }
        }else{
            for(var j =0; j < $scope.data.listCateAvailable.length; j++){
                $scope.data.listCateAvailable[j].flag = false;
            }
        }
    }

    c.onLoadCTToggleAll = function(){

        if(c.onLoadCategorySelectAllonHome){
            for(var i=0; i < $scope.data.displayCateAvailable.length; i++){
                $scope.data.displayCateAvailable[i].flag = true;
            }
        }else{
            for(var j =0; j < $scope.data.displayCateAvailable.length; j++){
                $scope.data.displayCateAvailable[j].flag = false;
            }
        }
        $scope.loadingData = true;
        var data = $scope.data;
        data.action = 'update_Selected_products';
        data.listSelectedSP = data.listSPAvailable;
        data.listSelectedCat = data.displayCateAvailable;

        $scope.server.update().then(function(response) {

            c.clearValue();
            spUtil.addInfoMessage(response.resp);
            $scope.loadingData = false;

            c.getOnLoadData();
        });

    }

    c.onLoadCTToggleSelected = function(cat){

        $scope.loadingData = true;
        var data = $scope.data;
        data.action = 'update_Selected_products';
        data.listSelectedSP = data.listSPAvailable;
        data.listSelectedCat = data.displayCateAvailable;

        $scope.server.update().then(function(response) {

            c.clearValue();
            spUtil.addInfoMessage(response.resp);
            $scope.loadingData = false;

            c.getOnLoadData();
        });
    }

    c.onToggleFlagSet = function(){

        var count = 0;
        for(var i in c.data.displayCateAvailable){
            if(c.data.displayCateAvailable[i].flag == true){
                count++;
            }
        }

        c.onLoadCategorySelectAllonHome = (count == c.data.displayCateAvailable.length) ? true : false;

    }
    
};

Server Script

(function() {

    //gs.getUser().setPreference("amd-selected-sold-products", '');

    data.listSPAvailable = [];
    data.listCateAvailable = [];
    data.displaySPAvailable = [];
    data.displayCateAvailable = [];
    data.userHasSP = true;

    if (!input) // asynch load list
        return;

    var nsUtil = new c_AMDNotificationUtil();

    data.userHasSP = nsUtil.getUserHasNS();

    if (!data.userHasSP)
        return;




    getList();



    if (input.action == 'update_products') {
        data.resp = nsUtil.updateSubscription(input.listSelectedSP, input.listSelectedCat);
    }

    if (input.action == 'update_Selected_products') {

        data.resp = nsUtil.updateSelectedCatSubscription(input.listSelectedSP, input.listSelectedCat);
    }
    if (input.action == 'onLoad_data') {
        getList();
    }


    function getList() {
        nsUtil = new c_AMDNotificationUtil();
        var spList = nsUtil.getUserSoldProductList();
        var catList = nsUtil.getUserSoldCategoryList();

        data.userHasPreference = nsUtil.selectedSP;

        data.listSPAvailable = spList;
        data.listCateAvailable = catList;

        data.displaySPAvailable = spList;
        data.displayCateAvailable = catList;

    }


})();

i tried but i can only make the button disable when all the options are unchecked, i don’t know how can i make button enable if one of the options are checked
i added in client Script:

$scope.submitDisabled = function() {
   var allChecked = $scope.c.onLoadSelectAllSPCheckBox
   return !allChecked;
}

in html

<div ng-if="!categoryTemplate">
    <button class="btn btn-outline-primary"  ng-click="c.closeTaskPopup($event)"  >
      ${Cancel}
    </button>
    <button class="btn btn-primary" ng-disabled="submitDisabled()  ng-click="c.toggleWindow()"  >
      ${Next}
    </button> 
  </div>

Thiết kế website giá rẻ

Danh mục

how can i enable the next button if one or more checked boxes are selected and disable if none are selected in ServiceNow