I am attempting to have a button be enabled or disabled in an angularjs app based on whether a comparison of two text fields evaluates to true or false. I have provided example code below and also made it available in a plunker here http://plnkr.co/edit/rzly8hy21048YGzsx2gW?p=preview
As you can see when you input a string to match the stored string the expression evaluates correctly however the button never becomes available.
Any help would be appreciated.
Here is the HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="updateCounter()">Increment count</button>
<input type="text" ng-model="inputfield">
<input type="button" value="Continue" ng-disabled="{{inputfield !== startertext}}">
<br>startertext: {{startertext}}
<br>nputfield: {{inputfield}}
<br>test: {{inputfield !== startertext}}
</body>
</html>
And the Javascript file is below.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.startertext = 'hello world';
});
Remove the curlies around your ng-disabled attribute.
Here's the way it worked for your plunk:
<input type="button" value="Continue" ng-disabled="startertext != inputfield">
Don't forget to remove the extra curlie in your controller (marked by an error sign when I opened it in the editor).
Related
I have a textarea in my app like so:
<textarea type="text" class="form-control" name="bioBackground" ng-model="obj.background" value="obj.background" ng-change="autosave()" maxlength="1500" required></textarea>
This is a required field and as you can see I have added a required tag in the code. But this required tag is causing errors with Angular.
For example:
If I type in the field and backspace and remove all the text it removes the object from the scope. see example below:
Before Backspacing
You can see background variable is in the scope.
After backspacing and removing the text:
You can see the background variable is gone from scope.
This only happens if I use required tag. If I don't use the required tag it works fine and even after removing all the text the background variable stays within the scope.
What am I doing wrong.
its working , background is undefined while remove all text using backspace.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.obj = {
"experience":{
"field0":"asdf",
"field1":"asss"
},
"background":""
};
console.log($scope.obj);
$scope.autosave=function(){
console.log($scope.obj);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<textarea type="text" class="form-control" name="bioBackground" ng-model="obj.background" value="obj.background" ng-change="autosave()" maxlength="1500" required></textarea>
</body>
</html>
I am stuck at this issue while running my code
<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
<md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
I keep getting this error.
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: filters in activeFilterCtrl.selectedfilters, Duplicate key: string:a, Duplicate value: a
Please provide the solution Following is the value of selected filter
selected filter value is [{"params":"min","value":5}, {"params":"max","value":30}]
try with this
ng-repeat="filters in activeFilterCtrl.selectedfilters track by $index"
Try this Demo Link
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl as activeFilterCtrl">
<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
<md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.selectedfilters = [{"params":"min","value":5}, {"params":"max","value":30}]
});
I have an AngularJS app that I manually bootstrap at time 't'. At time 't + 1', I would like to show an HTML element that has no ng-controller attached. I would like to dynamically add a ng-controller to this element so it can communicate with my javascript code.
How can I do that?
PS I tried to dynamically add the ng-controller attribute to the element but it doesn't work.
To do that you need to compile elements.
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
<meta charset=utf-8 />
<title>Angular JS</title>
</head>
<body ng-controller="parentCtrl">
<button ng-click="setCtrl2()">Set Controller</button>
<div id="placeholder">
<span></span>
<select>
<option></option>
</select>
<span class="input-append">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" />
<input type="submit" class="btn btn-primary" ng-click="addRow()" value="+ add" />
</span>
</div>
</body>
</html>
Javascript
angular.module('app', []);
angular.module('app').controller('ctrl', function($scope) {
$scope.rows = ['Paul','John','Lucie'];
$scope.name = 'Jack';
$scope.addRow = function(){
$scope.rows.push($scope.addName);
$scope.addName = "";
console.log($scope.rows);
};
})
.controller('parentCtrl', function($scope) {
$scope.setCtrl2 = setCtrl;
});
function setCtrl() {
var elem = document.getElementById('placeholder');
elem.setAttribute('ng-controller', 'ctrl');
var eSpan = elem.children[0];
var eSelect = elem.children[1].children[0];
eSpan.setAttribute('ng-bind', 'name');
eSelect.setAttribute('ng-repeat', 'row in rows');
eSelect.setAttribute('value', '{{ row }}');
eSelect.setAttribute('ng-bind', 'row');
var injector = angular.element(elem).injector();
var compile = injector.get('$compile');
var rootScope = injector.get('$rootScope');
var result = compile(elem)(rootScope);
// When outside of AngularJS you need to call digest
// rootScope.$digest();
}
See: http://codepen.io/skarllot/pen/LVKpgd
You don't mention whether you've looked at previously asked questions. I found two which look like they could address the question you've asked:
Loading an AngularJS controller dynamically
How to bind an AngularJS controller to dynamically added HTML?
I have the following markup that shows a value from ng-model.
<a ng-click="downloadDocument()">{{document.content.replace(/\d+\_/,"")}}</a>
Before each document.content I add a number and an underscore, smth like "12122141_document.txt". I want to replace this part by using this regex /\d+_/
This throws an error on angularJS, although {{ document.replace(" ","") }} works.
Is the only way to solve this a directive or am I doing something wrong?
Plunker: http://embed.plnkr.co/sh54XZwSIlYnmvY0eTIt/preview
Cheers,
Alex
I modified your Plunker-Demo and it works pretty fine.
Hint: Don't use $scope namespaces like "document". Its reserved/used by the client.
var app = angular.module('plunker', []);
Controller
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.fileName = {
content : function(){
return '1233_test.txt'.replace(/\d+\_/,"");
}
}
$scope.mpla = function () {
console.log('clicked');
}
});
View
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<a ng-click="mpla()" ng-bind="fileName.content()"></a>
</body>
</html>
I have angularjs application and <span> in it. I try to hide it with ng-hide directive, but:
<span ng-hide="hideSpan">
And
// controller code here
....
$scope.hideSpan = true;
....
Doesn't work, it's ignoring. And if i make:
// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....
I get error: $apply already in progress.
How can i correctly use ng-hide/ng-show in this way?
Thank you.
You should be able to directly control the hide/show functions from your controller just as you show. The following is working example using a button to trigger toggling of hide show.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="toggleHide()"/>Toggle Hide</button>
</body>
</html>
And the script.
angular.module('myapp', []).controller('mycontroller', function($scope){
$scope.hideSpan = true;
$scope.toggleHide = function(){
if($scope.hideSpan === true){
$scope.hideSpan = false;
}
else{
$scope.hideSpan = true;
}
}
});
I've created a simple plunker to show this in action at http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.
As far as why the $apply is causing an error, this is to be expected as direct scope (provided by the $scopeProvider) variable operations are already watching for change and wrapped into a default apply of sorts in core angular so any change will be automatically applied to the other bindings of that variable.
you can just change the hideSpan value in ng-click, save few lines. cheers
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button>
</body>