CODEWITHSUNDEEP
angularjs
Bharath Kumar
Bharath Kumar

Reputation: 850

text boxes changed to enable when click new in angularjs

I have form with bootstrap modal, in that modal has a text box and add email button. If you type proper email and click on add email button then the button will be changed to remove email button and text box mode set to disable mode and another new text. but when you click on remove email button all text boxes will be changed to in enable mode.

see my code here

My html code

<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="script.js"></script>
</head>


<div >
  <script type="text/ng-template" id="myModalContent">
      <div class="modal-header">
          <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
          <li ng-repeat="item in items " ng-form="subForm">
              <input type="text" name="name" ng-model="item.email"  ng-disabled="isDisable(disbl,$index)" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"  ng-enter="addOrRemove($index,item.email)"/>
              <span ng-show="subForm.name.$invalid || subFform.name.$pristine" style="color: red">Invalid email</span>
              <button ng-disabled="subForm.name.$invalid || subFform.name.$dirty" ng-click="addOrRemove($index,item.email)" >{{item.value}}</button>
               expression: {{subForm.name.$invalid}}
          </li>

      </div>
      <div class="modal-footer">
          <button class="btn btn-primary" ng-click="ok()">OK</button>
          <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
      </div>
  </script>

  <button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
</div>
</body>
</html>

My script code

var app = angular.module('app', ['ui.bootstrap']);
//var ModalDemoCtrl = function ($scope, $modal, $log) {
app.controller('ModalDemoCtrl',['$scope', '$modal','$log','$rootScope',
function controller($scope, $modal, $log, $rootScope)
{
  $scope.open = function (size) {
$scope.val = "";
var modalInstance = $modal.open({
  templateUrl: 'myModalContent',
  controller: ModalInstanceCtrl,
  size: size,
  backdrop: 'static',
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

}; }]);

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {
$scope.check2 = "hllo";

$scope.items = [
    {
        value: "Add email",
        state: "1",
        email: ""
    }];
$scope.check1;


$scope.addOrRemove = function(indexSelected,rcvEmail)
{//alert($rootScope.email1);

    if(!rcvEmail)
    {
        return
    }
    //console.log("just check email",rcvEmail);
    //console.log("length of the object",$scope.items.length);
    event.preventDefault();
    if($scope.items[indexSelected].state == 1)
    {
        $scope.isDisable = function(value,index)
        {
            if(index <= indexSelected)
            {
                //console.log(index);
                return value = "yes";
            }

        };
        //console.log($scope.items[indexSelected].state);
        $scope.items[indexSelected].value = "Remove email";
        $scope.items[indexSelected].state = "0";
        $scope.items[indexSelected].email = rcvEmail;
        $scope.items.push({value: "Add email", state: "1"});

    }
    else
    {
       $scope.items.splice(indexSelected, 1);

        $scope.isDisable = function(value,index)
        {
           console.log("indexes",index,"+",indexSelected);
            /*index = index-1;
            if(index <= $scope.items.length)
            {
                //console.log(index);
                return value = "yes";

            }
            else
            {
                return value = "";
            }*/
        };
    }

};

$scope.ok = function () {
$modalInstance.close();
};

$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};

};


app.directive('ngEnter', function () {
console.log("directive checke");
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
            scope.$apply(function (){
                scope.$eval(attrs.ngEnter);
            });

            event.preventDefault();
        }
    });
};
});

see my code here

Upvotes: 0

Views: 836

Answers (1)

Scott
Scott

Reputation: 1690

Set your ng-disabled to be

   (items[$index].state == 0) ? true:false

instead of a function.

Upvotes: 1

Related Questions