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>
...
Related
I'm new Angular JS.I stuck with $routeProvider example.I'm routing view1 and view2 using $routeProvider.when from main.html.View1 is working fine. View2 is not getting the $scope object.
View1 is displaying the customers data. But View2 is not working.
Did i miss something in the code.
##Main.html:
<html ng-app="demoApp">
<title>AngularJS Routing</title>
<body>
<div>
<ng-view></ng-view>
</div>
<script src="angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function($routeProvider)
{
$routeProvider
.when('/',{controller:'Controller1',templateUrl:'view1.html'})
.when('/view2',{controller:'Controller1',templateUrl:'view2.html'})
.otherwise({redirectTo:'/view1.html'});
});
demoApp.controller("Controller1", function($scope)
{
$scope.customers = [
{custname:"A",city:"Irving"},
{custname:"B",city:"Grapevine"},
{custname:"C",city:"Little Elm"},
{custname:"D",city:"Frisco"},
{custname:"E",city:"Mckinney"},
{custname:"F",city:"Prosper"}
];
$scope.addItem = function(){
$scope.customers.push({
custname:$scope.newCustomername,
city:$scope.newCustomercity
});
}
});
</script>
</body>
</html>
##view1.html:
<div class="container">
<h2>Welcome to Directive - Data Binding</h2>
Customer Name: <input type="text" data-ng-model="newCustomername">
Customer City: <input type="text" data-ng-model="newCustomercity">
<button ng-click="addItem()">Add Item</button>
<li ng-repeat="name in customers">
Customer Name: {{ name.custname }} <br/>
Customer City: {{ name.city }}
</li>
View 2
</div>
##View2.html:
<div class="container">
<h3> View 2</h3>
<li ng-repeat="name in customers">
Customer Name: {{ name.custname }} <br/>
Customer City: {{ name.city }}
</li>
</div>
I try to filter to show img depend on dropdown id, but it isn't work as desired. Where did i go wrong? Both filter isn't worked.
Here what i try so far
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select class="form-control">
<option ng-repeat="data in day_month_select_menu" ng-model="data.id"
value="{{data.id}}">{{data.selectText}}</option>
</select>
<img ng-repeat="data in day_month_select_menu |filter : data.id" src="{{data.img}}"
alt="Error" />
<ul>
<li ng-repeat="data in day_month_select_menu | filter:data.id">
{{ data.show }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.day_month_select_menu = [
{
id : 1, selectText:"day", show:"Monday", img:"tmp"
},
{
id : 2, selectText:"date", show:"Dec 12th 2018", img:"tmp2"
}
];
});
</script>
</body>
Does this work as you intended?
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.day_month_select_menu = [
{
id : 1, selectText:"day", show:"Monday", img:"tmp"
},
{
id : 2, selectText:"date", show:"Dec 12th 2018", img:"tmp2"
},
{
id : 3, selectText:"Test", show:"Dec 13th 2018", img:"tmp3"
}
];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl" >
<select class="form-control" ng-model="selectedMenuOption" >
<option ng-repeat="menuOption in day_month_select_menu"
value="{{menuOption.id}}" >{{menuOption.id}} - {{menuOption.selectText}}</option>
</select>
<!--
<br/>selected:{{selectedMenuOption}}
<hr/>
-->
<ng-container ng-repeat="data in day_month_select_menu" >
<span ng-if="data.id == selectedMenuOption">
<br/>{{data.id}} & {{selectedMenuOption}}: <img src="{{data.img}}" alt="Error" />
<span>
</ng-container>
<ul>
<li ng-repeat="data in day_month_select_menu | filter:data.id">
{{ data.show }}
</li>
</ul>
</div>
I have an array with 3 elements. Each element has a different key. How can I do to show only the name of the keys?
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in names">
{{item}}
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.names=
[
{"joe":1},
{"pablo":2},
{"greic":3}
]
//output should be:
//joe
//pablo
//greic
});
http://jsfiddle.net/8wq4qmh0/
You can pull out key and values with (x,y) syntax. But since it's an array of objects, you need another ng-repeat.
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.names = [{"joe": 1},{"pablo": 2},{"greic": 3}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in names"> <!-- pull object from the array -->
<div ng-repeat="(key, val) in item"> <!-- pull key and value from the object -->
{{key}}
</div>
</div>
</div>
</div>
Can I use a json file in ng-init to get data of the json file ?
I have this example but I want to replace my object by the json file.
<html>
<head>
<title></title>
</head>
<body ng-app>
<input type="text" ng-model="query"/>
<div ng-init="users=['coucou', 'ca va']"> <!--to be replaced by data contains in a json file-->
{{users}}
<ul>
<li ng-repeat="user in users">
{{user}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</body>
</html>
HTML
<body ng-app='app'>
<div ng-init="getData()" ng-controller="listController">
{{users}}
<ul>
<li ng-repeat="user in users">
{{user}}
</li>
</ul>
</div>
</body>
Controller:
var app = angular.module("app", []);
app.controller("listController", ["$scope", "$http",
function($scope, $http) {
$scope.getData = function() {
$http.get('test.json').then(function(response) {
$scope.users = response.data;
});
}
}
]);
DEMO
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">