AngularJS - 如何禁用文本顯示自定義文本

我有以下的輸入控制：AngularJS - 如何禁用文本顯示自定義文本

<input type="ng-model="someValue" ng-disabled="shouldBeDisabled"/>

，並用以下變量的模型：

someValue - 值應顯示在輸入時shouldBeDisabled==fals
shouldBeDisabled - 如果輸入應禁用
disabledText - 文本這應該是在輸入顯示器，而不是someValue時shouldBeDisabled==true

我應該如何改變上述HTML slipet用AngularJS來實現這一點？是否有可能通過僅使用這三個模型變量的內置AngularJS指令來實現？或者是否需要引入其他變量（如someValueForInputBox）並注意將其與someValue（未禁用時）或disabledText（禁用時）同步？

來源

2013-07-08 matra

您可以通過以下做到這一點，雖然你可能想把手錶放在shouldBeDisabled;

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.shouldBeDisabled = true; 

    $scope.toggleIt = function() { 
    $scope.shouldBeDisabled= ! $scope.shouldBeDisabled; 
    $scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || "true value"; // modify as required or leave off the true part. 
    } 
});

您還可以存儲值，所以當禁用文本出現，然後切換回你可以重新填充它。這是一隻手錶。

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.shouldBeDisabled = true; 
    $scope.disabledText = 'disabled stuff'; 

    $scope.maintainTrueValue = ''; 


    $scope.$watch('shouldBeDisabled', function() { 

    if ($scope.shouldBeDisabled) 
     $scope.maintainTrueValue = $scope.someValue; 
    $scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || $scope.maintainTrueValue; 

    }); 


    $scope.toggleIt = function() { 
     $scope.shouldBeDisabled= ! $scope.shouldBeDisabled; 
    } 

});

演示與手錶：http://plnkr.co/edit/8KAJc9JXvi2rffsjPXF5?p=preview

來源

2013-07-08 19:04:54 lucuma

我接受這一個，因爲它不需要元素的重複。 – matra

謝謝。或者，您可以在禁用時在輸入上覆蓋span/div，並在其中顯示禁用的文本，但通過javascript或兩個輸入非常簡單。 – lucuma

你可以使用NG-顯示/ NG隱藏換出輸入像這樣：

<input ng-model="disabledText" ng-show="shouldBeDisabled" disabled/> 
<input ng-model="someValue" ng-hide="shouldBeDisabled"/>

這裏是一個小提琴：http://jsfiddle.net/SVxCe/

來源

2013-07-08 18:56:20

AngularJS - 如何禁用文本顯示自定義文本

回答

相關問題