CODEWITHSUNDEEP
angularjs
Mercer
Mercer

Reputation: 9996

Enable button when i have selected two values

I have two select i want to enable my button when i have selected values in my two select, i don't know how i can do this ?

JSFIDDLE

My HTML:

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
            ng-options="people.first for people in people_1"
            ng-model="selectedPerson1"></select>
        <select
               ng-options="people.first for people in people_2"
            ng-model="selectedPerson2"></select>
    </fieldset>
    <br/><button class="btn btn-primary" ng-click="platform=true">Comparer</button>
</div>

Upvotes: 0

Views: 113

Answers (2)

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Here you go.There are lot of issue in you fiddle.I fixed it.

http://jsfiddle.net/purpz7u3/

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">
    <fieldset >
        <select 
            ng-options="people.first for people in people_1"
            ng-model="selectedPerson1" ng-change="check()"></select>
        <select
               ng-options="people.first for people in people_2"
            ng-model="selectedPerson2" ng-change="check()"></select>
    </fieldset>
                <br/><button class="btn btn-primary" ng-disabled="checked">Comparer</button>
    </div>

</div>

var myapp = angular.module('myapp', []); myapp.controller('FirstCtrl', function ($scope) { $scope.checked = true;

$scope.people_1 = [
    { id: 1, first: 'John' },
    { id: 2, first: 'Rocky' }
];
   $scope.people_2 = [
    { id: 1, first: 'Rambo' },
    { id: 2, first: 'Balboa'}
];
$scope.check = function(){
    if($scope.selectedPerson1 && $scope.selectedPerson2){
        $scope.checked=false;
    }
}

});

Upvotes: 1

Marc Harry
Marc Harry

Reputation: 2430

You can do this using the ng-disabled directive. I have amended your jsfiddle here: http://jsfiddle.net/p0t4cw84/3/. I moved the button into the scope of the controller FirstCtrl and added a method on the scope that will return true or false if values are selected.

$scope.enableCompare = function () {
    return !($scope.selectedPerson1 && $scope.selectedPerson2);
};

I hope this helps.

Upvotes: 1

Related Questions