Попытка сделать простую вещь в AngularJS: form-> если вы поместите правую кнопку word-> appears->, вы можете щелкнуть и перейти на другую страницу (я не пытался поместить ссылку на кнопку, так как она не появляется даже без ссылки)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="///foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="///angular.js"></script>
<script src="///app.js"></script>
</body>
</html>
и js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
проблема: если я набираю parola, кнопка не появляется, я новичок в java-скрипте. благодаря !
Сначала вы должны прочитать некоторые угловые учебники, у вас есть точный неправильный доступ к области, и вы используете неправильные $ watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="///foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="///angular.js"></script>
<script src="///app.js"></script>
</body>
</html>
И, наконец, вы переполняете свой код. Вы можете встроить его в шаблон без какой-либо функции контроллера
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="///foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="///angular.js"></script>
<script src="///app.js"></script>
</body>
</html>
Здесь есть несколько ошибок.
Во-первых, поле пароля привязано к MyCtrl.pass
. Но вы смотрите значение $ scope.pass
Во-вторых, $ scope. $ Watch ожидает, что угловое выражение будет оцениваться как аргумент, а не ценность для просмотра. Поэтому просмотр строки 'MyCtrl.pass'
будет правильным.
В-третьих, вы не должны использовать часы вообще. Вы должны просто использовать ng-show="isPasswordValid(pass)"
(см. Ниже) и вернуть true или false из этой функции.
В-четвертых, вместо выполнения $scope.kPass = ($scope.pass == "parola")
вы инвертируете значение $scope.kPass
, но только если это значение верно. Так что, если он исходит из неправильного для правильного, kPass
станет истинным. Тогда, если он станет неправильным, kPass
останется верным. И если он снова станет правильным, он станет ложным.
Итак, чтобы возобновить, все, что вам нужно, это
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
а также
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
angular.module('app',[]);
<script src="/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>