CODEWITHSUNDEEP
javascriptangularjs
Serg Shapoval
Serg Shapoval

Reputation: 717

Changing button name depending on inputs with AngularJS

How to change button name that depends on if some inputs are empty or not Example: if input1 and input2 is not empty but input3 is empty - button name will be "Test".

This is my code, but i doesn't work

    <div ng-app="myApp">
<form action="lab2.php" method="POST" ng-controller="controller">
<label>ID</label>
<input type="number" name="id" ng-model="id" name="id"/>
{{id}}
<label>Name:</label>
<input name="name" ng-model="name"  type="text"/>
<label>City:</label>
<input name="country" ng-model="country" type="text"/>
<button ng-bind="but" type="submit">{{getName()}}</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);

app.controller('controller', function($scope) {
    $scope.but="Operation";
    $scope.id=0;
    $scope.country="";
    $scope.name="";
    $scope.getName = function(){
    if($scope.id==0 && $scope.name!=="" && $scope.country!=="")
    {
        return "INSERT";
    }
    if($scope.id!==0 && $scope.name=="" && $scope.country=="")
    {
    return "DELETE";   
    }
    if($scope.id!==0 && $scope.name!=="" && $scope.country!=="")
    {
return "UPDATE";    
    }
}    
});
</script>

Upvotes: 0

Views: 1497

Answers (3)

Hadi
Hadi

Reputation: 17299

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
   $scope.name1 = "Test";
    $scope.name2 = "";
    $scope.name3 = "Test3";
  
  $scope.getName = function(){
      if( $scope.name1 == "" &&  $scope.name2 == "" &  $scope.name3 !== "")
         return "Test";
    return "Other";
    }
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
      <input type="text" ng-model="name1">
  <input type="text" ng-model="name2">
  <input type="text" ng-model="name3">
  
  <input type="button" name="{{getName()}}" value="{{getName()}}">
       
 
</div>

Upvotes: 1

Naga Sandeep
Naga Sandeep

Reputation: 1431

By name do you mean the name attribute or the display text? The code below works for both.

In your template, you can write

<button name={{setName()}}>{{setName()}}</button>

and in your controller, you can write

$scope.setName = function()
{
  // you can use switch here
  var buttonName = "";
  if($scope.input1 && $scope.input2 && !$scope.input3)
    buttonName = 'Foo';
  else
    buttonName = 'Bar';
  return buttonName;
}

Caution: As the input's change every time, the button text changes, it should be fine. But if you intend to change name attribute, then, it will cause a problem for the one who reads your code.

Upvotes: 0

Dave Amit
Dave Amit

Reputation: 2309

Try this:

<input ng-model="vm.input1" name="input1" type="text"/>
<input ng-model="vm.input2" name="input2" type="text"/>
<input ng-model="vm.input3" name="input3" type="text"/>

<button> {{(vm.input1 && vm.input2 && !vm.input3) ? 'Test' : 'Something Else' }} </button>

Something on these lines would work ...

jsfiddle: http://jsfiddle.net/0jeantca/3/

Hope this helps ...

Upvotes: 1

Related Questions