<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"];
}
});
Related
I want to get the check item from a list withing a ng-repeat in angular. Once the item is checked I want to put that checked item to another list.Here is my code so far.
<div class="col-lg-12" data-ng-repeat="user in users track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
<input type="checkbox" data-ng-checked="selectUser(user)" data-ng-model="user.isSelected" />
</div>
</div>
</div>
<div class="col-lg-12" data-ng-repeat="selectedUser in selectedUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{selectedUser.name}} </div>
<div class="col-lg-3">
</div>
</div>
</div>
This is my controller function to get the checked users.
$scope.selectUser = function(user){
if (user.isSelected) {
if ($scope.selectedUsers.indexOf(user.id) === -1) {
$scope.selectedUsers.push(user);
}
}else {
var index = $scope.selectedUsers.indexOf(user.id);
if ($scope.selectedUsers.indexOf(user.id) != -1) {
$scope.selectedUsers.splice(index, 1);
}
}
When I check a checkbox, all the users value will be passed to selectUsers() function. And it will give incorrect result. I want only to get the selected users. How can I do this?
Some mistakes you made here
You are using ng-check in wrong way.
Try this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.allUsers = [{
id:0,
name:'john',
age:26,
selectedUser:true
},{
id:1,
name:'isha',
age:23,
selectedUser:false
},{
id:2,
name:'scott',
age:34,
selectedUser:true
},{
id:3,
name:'riya',
age:26,
selectedUser:false
},{
id:4,
name:'Adam',
age:5,
selectedUser:true
},{
id:5,
name:'doe',
age:56,
selectedUser:true
},{
id:6,
name:'Jack',
age:22,
selectedUser:true
},{
id:7,
name:'robin',
age:11,
selectedUser:true
}];
$scope.selectedUsers = [];
$scope.selectUser = function(user){
if (user.isSelected) {
$scope.selectedUsers.push(user);
}else {
for (var i = 0; i < $scope.selectedUsers.length; i++) {
if ($scope.selectedUsers[i].id == user.id) {
$scope.selectedUsers.splice(i, 1);
}
}
}
}
})
</script>
</head>
<body style="margin-top: 100px" ng-app="myApp" ng-controller="myCtrl">
<div class="col-lg-12" data-ng-repeat="user in allUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
<input type="checkbox" ng-change="selectUser(user)" data-ng-model="user.isSelected" />
</div>
</div>
</div>
selected users
<div class="col-lg-12" data-ng-repeat="user in selectedUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
</div>
</div>
</div>
</body>
</html>
Try this I think u need like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.Fruits = [{
FruitId: 1,
Name: 'Apple',
Selected: false
}, {
FruitId: 2,
Name: 'Mango',
Selected: false
}, {
FruitId: 3,
Name: 'Orange',
Selected: false
}];
$scope.GetValue = function () {
var message = "";
for (var i = 0; i < $scope.Fruits.length; i++) {
if ($scope.Fruits[i].Selected) {
var fruitId = $scope.Fruits[i].FruitId;
var fruitName = $scope.Fruits[i].Name;
message += "Value: " + fruitId + " Text: " + fruitName + "\n";
}
}
$window.alert(message);
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-repeat="fruit in Fruits">
<label for="chkCustomer_{{fruit.FruitId}}">
<input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" />
{{fruit.Name}}
</label>
</div>
<br />
<br />
<input type="button" value="Get" ng-click="GetValue()" />
</div>
</body>
</html>
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>
I want to make a <p> appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the <p> tag.
<div id="logo">
<img src="{{selected_.image}}">
<div ng-if="selected_.image == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
</div>
Directive to handle images
var app = angular.module("app", []);
app.directive("imageLoading", function ($rootScope, $timeout) {
return {
restrict: "A",
scope: {
imageLoading: "="
},
link: function (scope, element) {
element.on("error", function () {
element.hide();
scope.$apply(function(){
scope.imageLoading = true;
})
});
}
};
});
<html ng-app="app">
<head>
</head>
<body>
<h4>image 1</h4>
<img image-loading="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
<div ng-show="google">google image not found</div>
<hr>
<h4>image 2</h4>
<img image-loading="google2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div ng-show="google2">google image not found</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
Here, I made working example for that plz check below link.
https://jsfiddle.net/hirojaisinghani/pxwbyuLL/27/
Plz check that.
<div ng-app="ImageDisplay">
<div id="logo" ng-controller="ImageController">
<div>
<h3>
First Image
</h3>
<img ng-if="selected_.image1 != ''" src="{{selected_.image1}}" height="100px" width="50px" /></div>
<div ng-if="selected_.image1 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
<div>
<h3>
Second Image
</h3>
<img ng-if="selected_.image2 != ''" src="{{selected_.image2}}" /> </div>
<div ng-if="selected_.image2 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>
</p>
</div>
</div>
</div>
var app = angular.module('ImageDisplay', []);
app.controller('ImageController', function($scope) {
$scope.selected_ = {
image1:null,
image2:null
};
$scope.selected_.image1= 'https://cdn0.iconfinder.com/data/icons/metro-style-people-svg-icons/48/User_login-512.png';
// alert($scope.selected_.image1);
$scope.selected_.image2 = '';
$scope.discardIntroPage = function() {
alert('Add Photo');
}
});
I am newbie in Angular js. Trying to use ng-repeat in following way
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = ["Emil", "Tobias", "rajeev", "sandeep","deepak"];
});
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div id="{{ 'tile' + $index }}" class="tile" ng-repeat="x in names">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
It gives me structure like this
myNewTile
myNewTile
myNewTile
myNewTile
myNewTile
I wanna every row contain only two tiles. For third and fourth tile new row should be created and so on. something like this
myNewTile myNewTile
myNewTile myNewTile
myNewTile
You have two options:
First Solution
Just put the ng-repeat in your column div:
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in names">
<div id="{{ 'tile' + $index }}" class="tile">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
Bootstrap will take care of the rest.
OR Second Solution
The problem with the first solution will arise when the height of each columns are not same due to the content then the Bootstrap will not be able to perform proper alignment of the columns. So you can either use this one.
You can first collate your list and the put two ng-repeat inside there:
// An helper function to collate the list
Array.prototype.collate = function(size) {
var list = [];
angular.forEach(this, function(item, i) {
if (i % size === 0) {
list[Math.floor(i / size)] = [item];
} else {
list[Math.floor(i / size)].push(item);
}
});
return list;
};
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var names = ["Emil", "Tobias", "rajeev", "sandeep", "deepak"];
$scope.collatedNames = names.collate(2);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="dynamicTile" ng-app="myApp" ng-controller="myCtrl">
<div class="row" ng-repeat="names in collatedNames">
<div class="col-xs-6" ng-repeat="x in names">
<div id="{{ 'tile' + $index }}" class="tile">
<h1>myNewTile</h1>
</div>
</div>
</div>
</div>
I've been trying unsuccessfully for the past hour to get the list of objects declared in my angularJS controller to populate the dropdown menu. When I click on an object in the dropdown list I want the controller to then call on the factory called "API" which then returns the html page that corresponds with the object selected.
HTML
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row">
<div class="col-md-10"> <!-- opencv dropdown menu -->
<div id="opencvFilters">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Opencv Filters :</label>
<div class="col-md-10">
<select class="form-control"
ng-model="template"
ng-options="t.name for t in templates">
<!--ng-change="Opencv_Controllers(filter)">-->
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div ng-include="template.url"><div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory("API", function ($http) {
return {
uploadImage: function (image) {
$http.post("upload.php", image);
}
}
)};
app.controller("MainController", ["$scope, API", function($scope, API) {
$scope.imageUrl = "";
$scope.template = "";
$scope.templates = []; // Declare Array
$scope.templates.push("MakeGray"); // Push object into array
$scope.templates.push("Canny");
$scope.template = $scope.templates[0];
$scope.add = function() {
var f = document.getElementById('file').files[0];
var r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
API.uploadImage(data)
.success(function (imgUrl) {
$scope.imageUrl = imgUrl;
})
.error (function (error) {
});
}
r.readAsBinaryString(f);
}
}]);
EDIT: Correct answer :
Try using ng-options="t for t in templates" instead of "t.name". You haven't assigned a "name" property to that json object