I am trying to sort the array using orderBy:names, but its not working , can some one tell me where i am doing the mistake??
<body data-ng-app="app" data-ng-controller="controller1" >
<div class="container">
<div class="row">
<input type="text" ng-model="searchbox" />
<li ng-repeat="name in names|filter:searchbox|orderBy:'names'">
{{name}}
</li>
</div>
</div>
<script type="text/javascript">
var app=angular.module('app', []).controller('controller1', ['$scope', function($scope){
$scope.names=['david', 'shreya', 'ankit'];
}]);
</script>
</body>
You can order by the toString() method. See: How to make orderby filter work on array of strings?. From that answer:
<ul ng-repeat="strVal in arrVal | orderBy:'toString()' | filter:searchText">
Related
I have an element of input type search. I am not able to apply filter on this.
<label class="item-input-wrapper" style="font-size:20px!important;">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" style="width:45%;font-size:20px!important;" placeholder=" Search" ng-model="searchText.text">
</label>
Here in this case filter is not being applied, where as if I don't use ng-if, I am able to apply filter. Please help as I don't want to remove ng-if as I have some reason to keep it.
<div class="w-clearfix product-row" ng-show="isListViewShown" **ng-repeat="product in arrayOfProducts |
filter : searchText.text " ng-if="$index % 4 === 0">**
<div class="_4-col" ng-if="$index <
arrayOfProducts.length">
product.name
</div>
</div>
Try this it may be helpful to you.
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.searchText = '';
$scope.names = ['India','America','Japan','Denmark','Russia','Landon','Cuba','Finland','Italy','Shrilanka','Australia','Brazil','Canada'];
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="ctrl">
<input type="search" ng-model="searchText" />
<ul>
<li ng-repeat="x in names | filter : searchText" ng-if="$index % 4 === 0">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
While Using ng-repeat , I need to print only 5 in a row
I have tried as shown below
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<br ng-if="($n+1)%5==0">
</div>
</div>
But all the rows are getting printed in a single row
http://jsfiddle.net/9fR23/474/
You could have it like this:
<div ng-repeat="n in names" style="display: inline">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<div ng-show="($index + 1) % 5 === 0">
<br>
</div>
</div>
working fiddle
<div ng-app = "myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>
<br ng-if="($index+1)%5==0">
</div>
</div>
Instead of break you can use <p></p> also
Try this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.1.4/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil1", "Tobias2", "Linus3","Emil4", "Tobias5", "Linus6","Emil7", "Tobias8", "Linus9","Emil10", "Tobias11", "Linus12","Emil13", "Tobias", "Linus"];
$scope.selectedNames = [];
$scope.select = function(name) {
var index = $scope.selectedNames.indexOf(name);
if(index < 0)
$scope.selectedNames.push(name);
else
$scope.selectedNames.splice(index, 1);
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<p ng-show="($index+1)%5==0"></p>
</div>
</div>
</body>
</html>
That's decause your divs width are default 100%. Try to use bootstrap grid system instead:
<div ng-app="myApp" ng-controller="myCtrl" class="row">
<div ng-repeat="n in names" class="col-xs-2">
<input type="checkbox" ng-click="select(n)"/>{{n}}
</div>
</div>
http://jsfiddle.net/f4yb539x/
Although you cannot split a row to 5 equal columns directly, only with a workaround with col offsets.
Try this
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<div ng-if="($index+1)%5==0"><br></div>
</span>
</div>
in my application, I have two controllers, in the first controller, I have a text input and ul so that I can filter list with filter:$rootScope.test, in the other controller I have only ul. What I want to is be able to filter ul from first(namesCtrl) and second controler (x) in parallel. I am using $rootScope as model, it is working on first controller, but not in the second. Can someone please show how to filter ul of first controller and second in same time ?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<body>
<div ng-app="myApp" >
<div ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" id="dSuggest" ng-model="$rootScope.test" ></p>
<ul>
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
</div>
<hr/>
<div ng-controller="x">
<ul>
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
</div>
</div>
<script>
$('#dSuggest').on("input", function(d){console.log($('#dSuggest').val())});
var app = angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
app.controller('x', function($scope, $rootScope) {
console.log($rootScope);
$scope.names = [
'Jani',
'Margareth',
'Hege',
'Joe',
];
})
</script>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
Just remove your input out of the namesCtrl controller, like this for instance:
...
<div ng-app="myApp" >
<div >
<p>Type a letter in the input field:</p>
<p><input type="text" id="dSuggest" ng-model="$rootScope.test" ></p>
<ul ng-controller="namesCtrl">
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
...
I have the following code which works great:
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width: {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}%;background-color: #5cb85c">
{{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}
</div>
</div>
However, as you can see, I am repeating {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}} alot and I therefore would like to assign it to angular variable. I would also like to do an NG-switch on the result. This is what I have tried
<div class="progress progress-striped active" ng-init = "barPercentage= {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}">
<div ng-switch="barPercentage">
<div ng-switch-when=">=0" class="progress-bar progress-bar-success" style="width: {{barPercentage}}%;background-color: #5cb85c">
{{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}
</div>
</div>
</div>
However this doesn't work at all but I'm unsure why. I get no errors in the console.
Any ideas?
var app = angular.module('demo', []);
app.controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$scope'];
function DemoCtrl($scope) {
// you can change this as you like. its just for demo purposes.
$scope.p = {
"availableIpAddressCount": 100,
"totalIpAddressCount": 70
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script data-require="ui-bootstrap-tpls#*" data-semver="1.2.5" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.2.5.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#1.3.2" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<div ng-app="demo" ng-controller="DemoCtrl">
<!--using ng-if -->
<div class="progress progress-striped active" ng-init="barPercentage= (p.availableIpAddressCount/p.totalIpAddressCount*100) | number:0">
<div ng-if="barPercentage>=0" class="progress-bar progress-bar-success" style="width: {{barPercentage | number: 0}}%;background-color: #5cb85c">
{{barPercentage |number:0}}
</div>
</div>
<!-- using ng-switch -->
<div class="progress progress-striped active" ng-init="barPercentage= (p.availableIpAddressCount/p.totalIpAddressCount*100) | number:0">
<div ng-switch on="(barPercentage>=0)">
<div ng-switch-when="true">
<div class="progress-bar progress-bar-success" style="width: {{barPercentage | number: 0}}%;background-color: #5cb85c">
{{barPercentage |number:0}}
</div>
</div>
<div ng-switch-default>
<!-- code to render the regular block -->
</div>
</div>
</div>
</div>
I would highly suggest that you create a variable in your controller and expose it to the scope.
$scope.barPercentage = (p.availableIpAddressCount/p.totalIpAddressCount)*100 ;
The way to do it in your html is effectively ng-init, but it's highly unrecommended in the docs.
Note that there are no AngularJS variables, rather a JavaScript object called $scope that is exposed to your template.
I am new to Angular JS and I am using the 1.6 version of it.
I have this apptest.js script:
var myApp = angular.module("myApp", []);
(function(){
"use strict";
myApp.controller("productController", function($scope, $http)
{
$http.get('data/data.json').then(function(prd)
{
$scope.prd = prd.data;
});
});
});
And here my data/data.json data:
[
{
"id":"1",
"title":"20 Foot Equipment Trailer",
"description":"2013 rainbow trailer 20 feet x 82 inch deck area, two 5,000 lb axels, electric brakes, two pull out ramps, break away box, spare tire.",
"price":6000,
"posted":"2015-10-24",
"contact": {
"name":"John Doe",
"phone":"(555) 555-5555",
"email":"johndoe#gmail.com"
},
"categories":[
"Vehicles",
"Parts and Accessories"
],
"image": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg",
"views":213
}
]
Now here is my html page where I specified the ng-app and ng-controller:
<body ng-app="myApp" ng-controller="productController">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Add <span class="sr-only">(current)</span></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-sm-4" ng-repeat="product in prd">
<div class="panel panel-primary">
<div class="panel-heading">{{product.title}}</div>
<div class="panel-body">
<img ng-src="{{product.image}}">
{{product.price | currency}}
{{product.description}}
</div>
<div class="panel-footer">a</div>
</div>
</div>
</div>
<script src="angular/angular.js"></script>
<script src="scripts/appTest.js"></script>
</body>
I am still getting the following error which is new for me:
angular.js:14239 Error: [$controller:ctrlreg] The controller with the
name 'productController' is not registered.
http://errors.angularjs.org/1.6.0-rc.0/$controller/ctrlreg?p0=productController
Any help is appreciated.
Its because of your Immediately Invoked Function Expression. you have to change it like below :
var myApp = angular.module("myApp", []);
(function(app){
"use strict";
app.controller("productController", function($scope, $http){
$http.get('data/data.json').then(function(prd){
$scope.prd = prd.data;
});
});
})(myApp);
Just import the file in index.html,
<script src=".../productController.js"></script>
In my case, it was missing reference in index page as well as my controller name was startupController (notice lower case s) and I was trying to register it with StartupController (upper case s)
In my case, with this same error, I failed to identify the app module in the ng-app directive like this:
<div class="row" ng-app>
In some circumstances I've seen where ng-app is by itself but I was forced to identify the app like:
<div class="row" ng-app="myApp">
In My case, I just copied a piece of code from an example, and it contained another ng-app and ng-controller in one of its <DIV>. The message was initially confusing, as the required controller had the name Ctrl
If you are reading this, check the name of the controller not found on your web browser console. Mine was Ctrl
So, I realized that my structure had another controller named like this one:
Bad Code
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<h1>{{message}}</h1>
<!-- SEE THIS TABLE HAS A CONTROLLER WITH A VERY UNDEFINED NAME, SO IT MAKES IT DIFFICULT TO TRACK -->
<table ng-app="app" ng-controller="Ctrl" >
<td>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true">
</ui-cropper>
</div>
</td>
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
</table>
</body>
<script>
var myApp = angular.module("sampleApp", []);
myApp.controller("SampleCtrl", function ($scope) {
$scope.message = "It Works!";
});
</script>
SOLUTION
After removing the controller and app definition not initially desired, it worked like a charm.
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<h1>{{message}}</h1>
<!-- SEE THE NOW DOES NOT HAVE A CONTROLLER, THE CONTROLLER WILL BE MY DEFAULT APP CONTROLLER SampleCtrl -->
<table>
<td>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true">
</ui-cropper>
</div>
</td>
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
</table>
</body>
<script>
var myApp = angular.module("sampleApp", []);
myApp.controller("SampleCtrl", function ($scope) {
$scope.message = "It Works!";
});
</script>
I have the same problem.
I solved the problem by puting the js code in the main js.
my html is a layer on the main html
my original html and js are following :
<div style="background: #f5f5f5;" ng-app='myapp' ng-controller="cIdentityCtrl as ctrl">
<form class="padding-md" name="staffForm" ng-submit="submit()">
<div class="row popup" style="padding-bottom: 10px;" ng-repeat="item in sfList">
<label style="width: 130px;text-align: right;"> {{item.branchName}}:</label>
<input type="text" style="width: 175px;display: inline-block;" class="form-control" ng-model="item.PERCENT"
placeholder="股份比例">%
</div>
<div class="clearfix"></div>
<div class="height50"></div>
<div class="text-center iframe-layer-btn">
<button type="submit" class="btn btn-success" ng-disabled="staffForm.$invalid">保存</button>
<button type="button" class="btn btn-default" ng-click="close()">关闭</button>
</div>
</form>
</div>
<script>
var myapp= angular.module('myapp',[]);
(function(myapp){
"use strict";
myapp.service('layerService', layerService)
.factory('instance', instance);
myapp.controller('cIdentityCtrl', function($scope, instance, layerService) {
console.log(instance.storeList)
$scope.sfList = angular.copy(instance.storeList);
$scope.submit = function(){
for(var i=0;i<$scope.sfList.length;i++){
if($scope.sfList[i].PERCENT!=null && $scope.sfList[i].PERCENT!=''){
if(!/^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/.test($scope.sfList[i].PERCENT)){
massage.error($scope.sfList[i].branchName+'门店设置有误:[0,100]保留二位小数');
return false;
}
}
}
instance.fnsf($scope.sfList);
layerService.close(instance.layero1);
}
$scope.close=function(){
layerService.close(instance.layero1);
}
});
})(myapp);
</script>
this html and js opened by ng-include ,but can not find the controller . and I put the js in the parent html`s js file and it worked well.
I had same issue and found the reason as...
The app module in the ng-app directive was defined/used at body-tag level like this
<body ng-app="intervalAngularExample">
and the $controller definition in productionController.js was imported in the html file at header level, certainly that should not work.
<head>
<script src=".../productController.js"></script>
</head>
<body ng-app="intervalAngularExample">
</body>
import should be then inside the body tag.
This error occurs when the $controller() service is called with a string that does not match any of the registered controllers. The controller service may have been invoked directly, or indirectly, for example through the ngController directive, or inside a component / directive / route definition (when using a string for the controller property). Third-party modules can also instantiate controllers with the $controller() service
Causes for this error can be:
1- Your reference to the controller has a typo. For example, in the ngController directive attribute, in a component definition's controller property, or in the call to $controller().
2- You have not registered the controller (neither via Module.controller nor $controllerProvider.register().
3- You have a typo in the registered controller name.
ref: https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController