Deactivate button with ng-disabled Angularjs

Question

Deactivate button with ng-disabled Angularjs

Navigation

#1 by (1 votes)

0

I have a select where I select the tipo of file that I will send if it is pdf or img , in case it is img I must send image-A and image-B just send 2 imgs must be deactivated the boton to send, now only deactivates when sent 1 img but I need to send first 2 and then deactivate the boton

I have the following code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.btnActivePdf = false;
    $scope.btnActiveImg1 = false;
    $scope.btnActiveImg2 = false;
    $scope.uploadFile = function(paramFile) {
        if (paramFile === 'pdf') {
            $scope.btnActivePdf = true;
        }
        if (paramFile === 'image-A') {
            $scope.btnActiveImg1 = true;
        }
        if (paramFile === 'image-A') {
            $scope.btnActiveImg2 = true;
        }

    }
});

<!DOCTYPE>
<html charsfet>
    <head>
<!--CDN ANGULARJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="script.js"></script>
    </head>
    <style type="text/css" media="screen">
        button[disabled] {
            background-color: red;
        }
    </style>
    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="typeFile">
            <option value="img">Imagen</option>
            <option value="pdf">Pdf</option>
        </select>
        <div>
            <div ng-show="typeFile == 'pdf'">
                <button type="button" ng-click="uploadFile('pdf')">Cargar pdf</button>
            </div>
            <div ng-show="typeFile == 'img'">
                <button type="button" ng-click="uploadFile('image-A')">Cargar img1</button>
                <button type="button" ng-click="uploadFile('image-B')">Cargar img2</button>
            </div>
            <button ng-disabled="btnActivePdf || btnActiveImg1 && btnActiveImg2">Enviar</button>
        </div>
    </body>
</html>

javascript html angularjs

asked by zerokira 13.06.2018 в 14:51

source

1 answer

How to send parameters by ajax using datatable in laravel? I always keep the session in php

score 1 · Answer 1

In the second if of the images you have to check image-B. Just in case I have included parentheses in the AND of the disabled of the send button.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.btnActivePdf = false;
    $scope.btnActiveImg1 = false;
    $scope.btnActiveImg2 = false;
    $scope.uploadFile = function(paramFile) {
    $scope.btnActivePdf = paramFile === 'pdf';

        if (paramFile === 'image-A') {
            $scope.btnActiveImg1 = true;
        }
        if (paramFile === 'image-B') {
            $scope.btnActiveImg2 = true;
        }

    }
});

<!DOCTYPE>
<html charsfet>
    <head>
<!--CDN ANGULARJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="script.js"></script>
    </head>
    <style type="text/css" media="screen">
        button[disabled] {
            background-color: red;
        }
    </style>
    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="typeFile">
            <option value="img">Imagen</option>
            <option value="pdf">Pdf</option>
        </select>
        <div>
            <div ng-show="typeFile == 'pdf'">
                <button type="button" ng-click="uploadFile('pdf')">Cargar pdf</button>
            </div>
            <div ng-show="typeFile == 'img'">
                <button type="button" ng-click="uploadFile('image-A')">Cargar img1</button>
                <button type="button" ng-click="uploadFile('image-B')">Cargar img2</button>
            </div>
            <button ng-disabled="btnActivePdf || (btnActiveImg1 && btnActiveImg2)">Enviar</button>
        </div>
    </body>
</html>