I'm using angularJS to do some custom filter work, but it failed to display model information at the first stage.
<html lang="en" data-ng-app="myApp">
<Head>
<title>Custom filter</title>
<meta charset="utf-8">
</head>
<body>
<div data-ng-init="varNum=0">
<p>
<label for="number">Enter number from 1 to 99:</label>
<input type="number" data-ng-model="varNum" id="number"/>
</p>
<p>Your number: {{ varNum }}</p>
</div>
<script src="js/angular.min.js"></script>
<script src="js/appromannumber.js"></script>
</body>
</html>
appromannumber.js
var app = angular.module("myApp", []);
app.filter("myFilter", function (){
return function(myNum) {
var formatedNumber = "";
switch(myNum) {
0:formatedNumber="zero";break;
return formatedNumber;
}
});
But if I remove the value of ng-app, like data-ng-app = "", it will start to display the varNum. I have no idea why this happen.
Should not work angular without bootstrap module means without ng-app="moduleName". I suspect that you miss something else and I mentioned bellow some problem in your code that may will help you
in your filter you missed
case in switch statement. need case 0: instead of 0:...
return formatedNumber; this statement is unreachable. should use after switch statement
you can try like:
app.filter("myFilter", function (){
return function(myNum) {
var formatedNumber = "";
switch(myNum) {
case 0:formatedNumber="zero";break;
case 1:formatedNumber="One";break;
}
return formatedNumber;
};
});
and in html:
<div data-ng-init="varNum=0">
<p>
<label for="number">Enter number from 1 to 99:</label>
<input type="number" data-ng-model="varNum" id="number"/>
</p>
<p>Your number: {{ varNum | myFilter }}</p> // shown filtered value
</div>
Related
I've seen quite a few listings related to this question but none of them seem to work or don't exactly fit my requirements.
I have an HTML document with an input type="text".
I am trying to accept numbers from the user and after every input, a comma will appear.
Ex.
User Enters 1234 -> Display 1,2,3,4
I would like the values to be saved to an array on the back side so same example
array[0] = 1
array[1] = 2
array[2] = 3
array[3] = 4
My HTML FILE Looks like this
<div class="input-group mb-3">
<input type="text" ng-keyup="format(this)">
</div>
The top DIV CLASS utilizes a ng-controller
<div class="modal-body" ng-controller="SplitCtrl">
I am just curiously how I can call that controller to create a function that will separate my inputs.
I would do something like this:
<div ng-controller="SplitCtrl">
<div class="input-group mb-3">
<input type="text" ng-model="text" ng-keyup="format($event)">
</div>
</div>
var app = angular.module('myApp', []);
app.controller('SplitCtrl',['$scope' ,function ($scope) {
$scope.format = function(e) {
if ($scope.text.length > 1) {
var text = $scope.text.split('').filter(function(_, i) {
return (i % 2) === 0;//filter out previous commas
}).join('') + e.key;
$scope.text = text.split('').join(',');
}
}
}])
As long as you don't need numbers with multiple characters (like 10) this should work.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<script>
angular.module('myApp', [])
.controller('AppController', ['$scope', function($scope) {
$scope.change = function() {
$scope.numbers = $scope.numbers.replace(/,/g, '').split('').join(',');
};
}]);
</script>
<div ng-controller="AppController">
<input type="text" ng-model="numbers" ng-change="change()" />
</div>
</body>
</html>
I am facing a strange problem with the below code..
whenever I remove the ng-controller="page" from the body tag, the expressions start getting evaluated. But on applying this controller on body tag, the expressions tend to get printed as text rather than being evaluated.
Below is my relevant code (Snippet):
<html ng-app="app">
<head>
<!-- links removed for brevity -->
<script>
var app = angular.module('app',[]);
app.controller('page',function($scope){
$scope.segment.name = 'asdf';
});
</script>
</head>
<body ng-controller="page" style="padding:0px;">
<!-- additional markup removed for brevity -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Portal ID" ng-model="page.segment.name"/>
</div>
<button class="btn btn-default">Search {{page.segment.name}}</button>
</form>
</body>
</html>
I am possibly making some blunder in the above code as the below code which I wrote as proof of concept works well.
POC code (Snippet):
<html ng-app="app">
<head>
<!-- links removed for brevity -->
</head>
<body ng-controller="page">
<a>Name : {{page.segment.name}}</a>
<input type = "text" ng-model="page.segment.name"/>
</body>
<!-- links removed for brevity -->
<script>
var app = angular.module('app',[]);
app.controller('page',['$scope',function($scope){}]);
</script>
</html>
Kindly help
Thanks in advance..
You are probably getting an error in the console. I would guess it's something similar to "Cannot set property 'name' of undefined." What you are doing here is not valid:
$scope.segment.name = 'asdf';
You need to either do this:
$scope.segment = {};
$scope.segment.name = 'asdf';
Or this:
$scope.segment = { name: 'asdf' };
You have to create the segment object explicitly before you attempt to set properties on it.
I am getting a infinite digest cycle error with the filter code below. What is incorrect with it. I do not see an issue with this. Is there a different method of assignation or is it a known bug? I am not sure whats happening here with this error
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="UTF-8">
<title>Directives</title>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<h1>Test Text for style</h1>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search">
<div ng-repeat="var in variable | filtername:'test':'test2':'test3' track by $index">
{{var}}
</div>
</div>
<script>
var app = angular.module("demo",[]);
app.filter("filtername",function(){
return function(array, arrayField, arrayField1, arrayField2){
/* modification here */
var myArr = [];
for(var i=0;i<array.length;i++){
if((array[i].name===arrayField) || (array[i].name===arrayField1) ||(array[i].name===arrayField2)){
myArr.push({name: angular.uppercase(array[i].name)});
}
}
return myArr;
}
})
app.controller("firstCtrl",function($scope){
$scope.variable = [
{name:"test"},
{name:"test2"},
{name:"test3"},
{name:"test4"}];
})
</script>
</body>
</html>
This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 7 years ago.
I have a problem when i try to fragment my html with ng-include:
This is what my index.html page looks like when it works (prix=price, TVA=tax):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title> TVA </title>
</head>
<body>
<div>
<div ng-app="app" ng-controller="appCtrl">
<input ng-model="tva" placeholder="TVA" /><br />
<input ng-model="prix" placeholder="Prix" />
<select ng-model="taxe">
<option>HT</option>
<option>TTC</option>
</select>
<button id="btn" ng-click="calcul()">Calculer</button>
<p>{{ total }}</p>
</div>
</div>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js :
app = angular.module('app', []);
app.controller('appCtrl', ['$scope', function ($scope) {
$scope.calcul = function() {
if ($scope.taxe == "TTC") {
$scope.total = parseInt($scope.prix) + $scope.prix * $scope.tva /100;
} else if($scope.taxe == "HT") {
$scope.total = 1/(1+$scope.tva/100)*$scope.prix;
}
};
}]);
So this works, the result is an number (the price with or without tax).
When I use the ng-include like this:
<div>
<div ng-app="app" ng-controller="appCtrl">
<div ng-include="'tva.html'"></div>
<input ng-model="prix" placeholder="Prix" />
<select ng-model="taxe">
<option>HT</option>
<option>TTC</option>
</select>
<button id="btn" ng-click="calcul()">Calculer</button>
<p>{{ total }}</p>
</div>
</div>
I only tried to replace the first input with a new HTML page.
The tva.html :
<input ng-model="tva" placeholder="TVA" /><br />
Now the results show "NaN" (I put those codes on a server so that I can check online). Why is this?
#Josh Beam Answered & explained ng-include creates a child scope on creating the DOM. I'd suggest you to use dot rule in angular that will follow prototypal inheritance on that object and you object value will access in child scope.
Now your object structure will changed to $scope.model={}; and this model will have all the input values. like all will become like model.prix, model.taxe & model.tva so that the prototypal inheritance will follow.
Markup
<div ng-app="app" ng-controller="appCtrl">
<div ng-include="'tva.html'"></div>
<br />
<input ng-model="model.prix" placeholder="Prix" />
<select ng-model="model.taxe">
<option>HT</option>
<option>TTC</option>
</select>
<button id="btn" ng-click="calcul()">Calculer</button>
<p>{{ total }}</p>
</div>
Code
app.controller('appCtrl', ['$scope', function ($scope) {
$scope.model = {};
$scope.calcul = function() {
if ($scope.model.taxe == "TTC") {
$scope.total = parseInt($scope.model.prix) + $scope.model.prix * $scope.model.tva /100;
} else if($scope.model.taxe == "HT") {
$scope.total = 1/(1+$scope.model.tva/100)*$scope.model.prix;
}
};
}]);
tva.html
<input ng-model="model.tva" placeholder="TVA" /><br />
Demo Plunkr
Short answer: don't use ng-include in this instance.
Long answer: ng-include creates a new child scope, so ng-model inside the ng-include isn't appCtrl's TVA. I don't see a reason here to use ng-include anyway, your code is fine without it.
So basically you're getting NaN (not a number) because $scope.TVA is never set when using the ng-include... you're attempting to multiply an undefined variable by another number, which returns NaN:
The reason for that is the ng-include creates a new scope under the scope when the HTML was included, but you can access to the parent scope by specifying $parent
<input ng-model="$parent.tva" placeholder="TVA" /><br />
A better approach is give an alias to your controller, so it will be clear semantically to children controllers accessing to a specific parent.
<div ng-app="app" ng-controller="appCtrl as vmMain">
<div ng-include="'tva.html'"></div>
... and in the other file:
<input ng-model="vmMain.tva" placeholder="TVA" /><br />
I have a simple two-way binding setup with angular, and I added a plain javascript function that updates the value based off of the "alt" tag of an image a user clicks on. The problem is that when I hit save, the data doesn't update until I click inside the textbox and add a space. What's the best way to get around this?
http://plnkr.co/edit/j6tPYYUqvRyvfs32mcrW?p=preview
angular.module('copyExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.master = {};
$scope.update = function(user) {
// Example with 1 argument
$scope.master = angular.copy(user);
};
$scope.reset = function() {
// Example with 2 arguments
angular.copy($scope.master, $scope.user);
};
$scope.reset();
}
]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="copyExample">
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name:
<input type="text" ng-model="user.name" id="name" />
<br />
<img src="http://placehold.it/100&text=John" onclick="changeText(alt)" alt="John" />
<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
<script>
function changeText(value) {
document.getElementById('name').value = value
}
</script>
</body>
</html>
working fiddle - http://jsfiddle.net/lwalden/b2p7pu7g/
If you are already using Angular then don't write a plain vanilla javascript function for the image click event - use Angular.
Also it's recommended not to use the alt attribute in this way. You could use a data- attribute instead.
Additional attributes within a tag to pass values to a function