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>
Related
codepen this is the working code
I have a working code for changing the status of the network.
But I used jQuery to achieve it and now I am using angular app for the same thing.
Could you please help me.
Below is the Angular Code I have tried from already existing plunker:
Plunker
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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hello {{name}}! {{online}}
</body>
</html>
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
});
}, false);
});
Use ng-class like this:
<div id="connection" ng-class="{'connected': online == true}">Online<div></div></div>
Here is your corrected Plunker
Hope this is what you wanted.
http://plnkr.co/edit/C2oJAYtEbb2lMixY2rVa?p=preview
<div id="connection" ng-class="{'connected': online, 'disconnected': !online}">
<span ng-if="$root.online">Online<div></div></span>
<span ng-if="!$root.online">Offline<div></div></span>
</div>
Note that with this approach, the initial state of 'connecting...' is not handled.
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}]
});
Here is a snippet demonstrating how to inherit from a base controller using $controller and $scope:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
How can I do the same using "controller as" syntax? This snippet demonstrates what I am after, but it doesn't work:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>
You could use controller as syntax (or just use the ctrl instance returned by $controller provider) and use angular.extend. But i don't think there is another way implicitly angular would do this, since "controller as" syntax ultimately places the controller instance on the respective scope as a property name specified as alias. But this really isn't inheritance, but utilizing object extension.
var ctrl = $controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, ctrl);
//or
$controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, $scope.base); //With as syntax
Or you could use prototypical inheritance at the implementation level of the controller constructors itself. There are lots of syntactic sugars available, typescript's extends there is another nice and simple example here as well.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
var ctrl = $controller('BaseCtrl as base', {
$scope: $scope
});
angular.extend(this, ctrl);
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>
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).