I try to repeat a multilayer array in angular,but may be using the method is not correct, this is the example:
var app = angular.module("app", []);
app.controller("index", ["$scope", function ($scope) {
$scope.list = [
{
list2: ["1111"]
},
{
list2: ["2222"]
},
{
list2: ["3333"]
}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="index">
<ul ng-repeat="l in list">
<li ng-repeat="item in l.list2">
<input type="text" ng-model="item" style="width: 300px;"/>
</li>
</ul>
<pre>{{list |json}}</pre>
</div>
What You are using is also correct.
You can simplify it using following implementation.
var app = angular.module("app", []);
app.controller("index", ["$scope", function ($scope) {
$scope.list = [
["1111"],["2222"],["3333"]
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="index">
<ul ng-repeat="l in list">
<li ng-repeat="item in l">
<input type="text" ng-model="item" style="width: 300px;"/>
</li>
</ul>
<pre>{{list |json}}</pre>
</div>
Related
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
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in beds">
<div class="stars" ng-repeat="t in [item.Value.Rate]">
<i class="fa fa-star"></i>
</div>
</div>
This is my code. when i want to use ng-repeat second time, it's not working. i want something like that:
if [item.Value.Rate] return 3, append <i class="fa fa-star"></i> 3 times, if it returns 1, just one <i class="fa fa-star"></i>
Here is a directive definition which I think solves the problem you had in your mind, If you are new to angular I suggest you to first check the directive docs
Edit:
Use lodash to generate range and use that array in ng-repeat.
var app = angular.module('app', []);
app.directive('starRating', function () {
return {
scope: {
value: '='
},
template: '<div class="stars"><i class="fa fa-star" ng-repeat="r in entries"></i></div>',
controller: function ($scope) {
$scope.entries = _.range($scope.value);
}
}
});
app.controller('Ctrl', function($scope) {
var ctrl = this;
ctrl.beds = [
{
Value: {
Rate: 5
}
},
{
Value: {
Rate: 2
}
},
{
Value: {
Rate: 3
}
}
];
return ctrl;
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<body>
<div ng-controller="Ctrl as ctrl">
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in ctrl.beds">
<star-rating value="item.Value.Rate">
</star-rating>
</div>
</div>
</body>
</html>
ng-repeat repeats based on the number of elements. I guess here item.Value.Rate is an integer. So its not a collection and hence the repeat doesn't work.
What you can do:
in the second div use
<div class="stars" ng-repeat="t in getCustomRepeatArray(item.Value.Rate)">
and in your angular code have this:
$scope.getCustomRepeatArray(numberValue)
{
return new Array(numberValue);
}
Don't forget to upvote if you find this helpful!!
You can try this -
In your controller -
$scope.getLength = function(num) {
return new Array(num);
}
And your html -
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in beds">
<div class="stars" ng-repeat="t in getLength(item.Value.Rate)">
<i class="fa fa-star"></i>
</div>
</div>
https://jsfiddle.net/5u5zakub/7/
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in beds">
<div ng-repeat="t in getArray(item)">
<i>{{t}}</i>
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.beds = ["1", "2"];
$scope.getArray = function(num) {
if (num == "1")
return ["a","b"];
else
return ["c","d"];
}
});
on click of an element i am showing a list. as well on click on the same list element, I am hiding the list. but on click on the list element not hiding the parent.
here is the snippet. click on the show and click on the one of the list element.
var app = angular.module('dropdown', []);
app.controller('MainCtrl', function($scope) {
$scope.show = false;
$scope.names = ["one", "click and hide ", "three"]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dropdown" ng-controller="MainCtrl">
<span ng-click="show = !show">Show me</span>
<ul ng-show="show">
<li ng-repeat="name in names" ng-click="show = !show">{{name}}</li> <!-- not hiding on click -->
</ul>
</div>
what is wrong here? how to fix it?
ng-repeat makes a new scope. You need $parent.show = !$parent.show
var app = angular.module('dropdown', []);
app.controller('MainCtrl', function($scope) {
$scope.show = false;
$scope.names = ["one", "click and hide ", "three"]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dropdown" ng-controller="MainCtrl">
<span ng-click="show = !show">Show me</span>
<ul ng-show="show">
<li ng-repeat="name in names" ng-click="$parent.show = !$parent.show;">{{name}}</li> <!-- not hiding on click -->
</ul>
</div>
You can declare as a function and call from any where. So you can you this:
var app = angular.module('dropdown', []);
app.controller('MainCtrl', function($scope) {
$scope.show = false;
$scope.names = ["one", "click and hide ", "three"];
$scope.toggle = function(){
$scope.show = !$scope.show;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dropdown" ng-controller="MainCtrl">
<span ng-click="toggle()">Show me</span>
<ul ng-show="show">
<li ng-repeat="name in names" ng-click="toggle()">{{name}}</li> <!-- Now this is hiding on click -->
</ul>
</div>
<div ng-app="dropdown" ng-controller="MainCtrl">
<span ng-click="show = !show">Show me</span>
<ul ng-show="show">
<li ng-repeat="name in names" ng-click="$parent.show = !$parent.show">{{name}}</li> <!-- not hiding on click -->
</ul>
Does that work? You have to call the parent's scope :)
I'm new to angular and i'm trying to use ng-switch to dynamically load templates using include in bootstrap modal but click doesn't seem to work. What am i doing wrong here ?
HTML
ModalContent.html
<div ng-controller="Nav" class="modal-body">
<div class="left-nav" ng-include="'LeftNav.html'"></div>
<div class="right-nav" ng-include="'RightNav.html'"></div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<div ng-switch-when="item2">
<div ng-include="'Item2.html'"></div>
</div>
<div ng-switch-when="item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>
JS
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
})
Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
There were a couple of problems.
Here is a working demo: http://plnkr.co/edit/CZPvD373HbCC2Ism0xlA?p=preview
Comments inline:
Controller
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
$scope.page = $scope.items[0];
$scope.selectItem = function (item) {
$scope.page = item;
}
})
LeftNav template
<ul>
<li ng-repeat="item in items">
<!-- calling `selectItem` on the controller to set the `page`
otherwise `page` will be set on the current `ng-include` scope
and will be unavailable elsewhere -->
{{ item }}
</li>
</ul>
RightNav template
<!-- 'page' is now from the 'Nav' controller's $scope -->
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item2">
<div ng-include="'Item2.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>