У меня есть кнопка, которая должна управляться на основе того, если пользователь ввел значения на странице html.Включить кнопку отключения от контроллера в angular.js

Я привязал модель к текстовому полю и установил отключенную переменную в области $ scope, которая включена/отключена на значение модели поля ввода.

Вот HTML

<!--This button should be disabled if no value is enterd in both the field--> 
    <input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-model="first"> 
    <br> 
    <input type="text" ng-model='last'>

А вот correponding угловой контроллер.

angular.module('app', []).controller('myController', function($scope) { 

    $scope.disabled = !$scope.first || !$scope.last; 

})

Он запускается в первый раз, но затем не отображает изменения на основе более поздних модификаций.

В соответствии с моим пониманием угловой использует двустороннюю привязку, поэтому, если я изменяю что-либо в представлении, оно должно отражаться на контроллере, а затем все изменения на контроллере должны отражаться на представлении. Что я здесь делаю?

PS: Я не хочу использовать форму
Я хочу избежать события onChange в поле ввода текста.

Пожалуйста, обратитесь бухнуться http://plnkr.co/edit/L5wkcpNzMMBZxtcitJwk?p=preview

источник

2016-11-17 Pankaj

Использование ng-disabled='!first || !last'.

следующая логика, кажется, работает, по крайней мере, в вашей Plunker:

<input type='button' value='click' ng-disabled='!first || !last'> 
<br> 
<input type="text" ng-model="first"> 
<br> 
<input type="text" ng-model='last'>

Это правда, что область действия переменной $scope.first и $scope.last имеет два пути, связанное с контроллером. Это означает, что любое изменение полей ввода должно автоматически отражать состояние этих переменных. Но disabled - это вычисленное количество, и это вычисляется один раз, во время загрузки контроллера, но не снова в вашем коде. Следовательно, disabled всегда будет true, даже после ввода текста в оба окна ввода.

Plunker

источник

2016-11-17 07:46:26

Спасибо за предоставленную надлежащее объяснение. Я был уверен, что ng-change будет работать, как было предложено в другом ответе, но это будет последнее средство, которое я буду искать. – Pankaj

@Pankaj Если вам нужно было сделать что-то еще в случае смены, то вы можете подумать о том, чтобы пойти с ответом Саджетарана. Но для вашего простого случая я бы предпочел не добавлять дополнительную логику к вашему контроллеру. –

Идя по этому подходу, скажем, у меня есть n полей, а не первый и последний, поэтому он добавит длинное выражение для ng-disabled, есть ли хороший чистый способ достичь этого? Снова ng-change - последнее средство – Pankaj

Попробуйте

angular.module('app', []).controller('myController', function($scope) { 

    $scope.disabled = !$scope.first=="" || !$scope.last == ""; 

})

источник

2016-11-17 07:46:10

Вы можете сделать это путем обнаружения изменений на входах

angular.module('app', []).controller('myController', function($scope) { 
    $scope.change = function() { 
    $scope.disabled = !$scope.first || !$scope.last; 
    }  
})

HTML

<input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-change="change()" ng-model="first"> 
    <br> 
    <input type="text" ng-change="change()" ng-model='last'>

DEMO

источник

2016-11-17 07:48:15 Sajeetharan

использовать этот один. я надеюсь, что это помогает:

 $scope.disabled=($scope.first==""?true:($scope.last==""?true:false))

источник

2016-11-17 07:49:17

Можете ли вы объяснить свой ответ? Что вы сделали и почему это работает? – empiric

actly i поместил тернарный оператор. Прежде всего, если будет проверять, что первый пуст или нет, если нет, то он будет проверять, чтобы последний –

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app> 
 
<input type='button' value='click' ng-disabled='first.length==0||last.length==0||first==undefined||last==undefined'> 
 
    <br> 
 
    <input type="text" ng-model="first"> 
 
    <br> 
 
     <input type="text" ng-model='last'> 
 
</div>

источник

2016-11-17 07:52:55 Pravin

я редактировал plunker. Пожалуйста, вздергивайте его и дайте мне знать.

код расслоение плотной:

angular.module('app',[]).controller('myController', function($scope){ 

    $scope.disabled = true; 

    $scope.func=function() { 
    $scope.disabled = true; 
    if($scope.first && $scope.last) { 
     $scope.disabled=false; 
    } 
    } 

})

HTML код:

<!DOCTYPE html> 
<html ng-app='app'> 

<head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller='myController'> 

    <!--This button should be disabled if no value is enterd in both the field--> 
    <input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-model="first" ng-change="func()"> 
    <br> 
    <input type="text" ng-model='last' ng-change="func()"> 
</body> 

</html>

источник

2016-11-17 07:54:40 Batman

Включить кнопку отключения от контроллера в angular.js

ответ

Plunker

Смежные вопросы