Как отключить кнопку без изменения условия ng-if для флажка типа ввода с помощью angularjs? - PullRequest
Новая
       0

Как отключить кнопку без изменения условия ng-if для флажка типа ввода с помощью angularjs?

0 голосов
/ 27 марта 2020

У меня есть одна интересная ситуация, у меня есть код ниже.

Js: 

<script>
  var app = angular.module('MyApp', []);    
    app.controller('MyCtrl', function($scope) {
      $scope.a=10;
    });
</script>

html: 

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    Click Me: <input type="checkbox" ng-model="checked" ng-if="a===10"/> <br />
    <button ng-disabled="checked">Test</button>
  </div>
</body>

Если я запускаю приведенный выше код, кнопка Test не отключается. Я не уверен, почему?

Но, согласно моему требованию, условие ng-if должно присутствовать только в теге <input />, и я не могу написать или объединить теги <input /> и <button> в одном <div>.

Так что, пожалуйста, помогите мне, чтобы любой другой способ получить мой Test button должен быть в отключенном режиме при нажатии флажка типа input без изменения примера кода выше.

Codepen .

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Поскольку ng-if создает дочернюю область, чтобы ng-model работал с ng-if, вам необходимо связать ее со свойством объекта. Примерно так:

JS

<script>
  var app = angular.module('MyApp', []);    
  app.controller('MyCtrl', function($scope) {
    $scope.a=10;
    $scope.checkbox = {};
  });
</script>

HTML

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    Click Me: <input type="checkbox" ng-model="checkbox.checked" ng-if="a===10"/> <br />
    <button ng-disabled="checkbox.checked">Test</button>
  </div>
</body>

Codepen

1 голос
/ 27 марта 2020

Попробуйте следующий код: 

<html ng-app="MyApp">
  <head>
  </head>
  <body ng-controller="MyCtrl">
      <div>
    Click Me: <input type="checkbox" ng-model="data.checked" ng-if="a===10"/> <br />
  </div> 
    <button ng-disabled="data.checked">Test</button>
  </div>
  </body>
</html>

и добавьте в свой скрипт: 

<script>
  var app = angular.module('MyApp', []);    
    app.controller('MyCtrl', function($scope) {
      $scope.a=10;
      $scope.data = {};
    });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...