文本框更改爲啓用時點擊新的angularjs

我有形式與引導模態，在該模式有一個文本框，並添加電子郵件按鈕。如果您輸入正確的電子郵件並單擊添加電子郵件按鈕，則該按鈕將被更改爲刪除電子郵件按鈕和文本框模式設置爲禁用模式和另一個新文本。但是當你點擊刪除電子郵件按鈕時，所有的文本框將被改爲啓用模式。文本框更改爲啓用時點擊新的angularjs

see my code here

我的HTML代碼

<!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>

我的腳本代碼

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

來源

2014-09-24 Bharath Kumar

您的plnkr不完整，與上面的代碼不同。嘗試讓plnkr像你在這裏描述的那樣工作，並且可能更容易弄清楚什麼是錯誤的。還有什麼是傳遞給isDisable（）的變量'disbl'？ – Scott 2014-09-24 18:13:24

我更新了代碼。使用disbl變量將文本框設置爲禁用模式... – 2014-09-25 01:06:02

設置你的NG-殘疾人是

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

，而不是功能。

來源

2014-09-25 17:46:48 Scott

文本框更改爲啓用時點擊新的angularjs

回答

相關問題