I have a ng-repeat directive pulling out data from a static json file. I am using a filter to limit the number of items of the directive and buttons to increase / decrease that limit. I want the content to be prepended (added to the top) to the list when the button is clicked.
Notice that I don't need to increment de array, I have loaded all the data that I need on the json.
<!DOCTYPE html>
<html lang="pt-BR" ng-app="myApp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myController', function myController($scope,$http){
$http.get('js/exemple.json').then(function(response){
$scope.exemple = response.data;
});
})
</script>
</head>
<body class="home" ng-controller="myController">
<form class="filtro">
<label>
Filtrar por: <strong>{{query}}</strong> <br> <input type="text" placeholder="Digite para filtrar" ng-model="query">
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="" checked class="checked"> padrão
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="cliente"> cliente
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="tipo"> tipo
</label>
<button ng-click="limit = limit + 3" ng-disabled="limit >= exemple.portifolio.length">mostrar mais</button>
<button ng-click="limit = limit - 3" ng-disabled="limit == 3">mostrar menos</button>
</form>
<div class="portifolio-itens" ng-init="limit = 6">
<div class="portifolio-item" ng-repeat="item in exemple.portifolio | filter:query | orderBy:filtrarPor | limitTo:limit">
<a data-id="#job{{$index}}">
<h3>{{item.tipo}}</h3>
<h4>{{item.cliente}}</h4>
<p>{{item.info}}</p>
</a>
</div>
</div>
</body>
</html>
Thanks for the comments! I managed to achieve what I needed through CSS flexbox without changing any aspect of the js / html that I posted:
.portifolio-itens {display: flex; flex-wrap: wrap-reverse;}
Related
I am writing an app with Angular 1.5. I have a form with a time input.
<div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">
<span class="input-label" ng-i18next="TIME"></span>
<input name="time" type="time" max="{{ accvm.data.maxTime | date:'HH:mm' }}" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />
</div>
<div ng-messages="accvm.addForm.time.$error">
<div class="form-error" ng-message="required"><span ng-i18next="VALIDATION_PROJECT"></span></div>
<div class="form-error" ng-message="max"><span ng-i18next="VALIDATION_TIME_FUTURE"></span></div>
</div>
For some reason, the ng-change function is only called once when the page loads and never again even if I type a new value in. I am not sure what I am doing wrong.
Here is my JSFiddle: http://jsfiddle.net/aubz88/j25jwtL2/
ng-change is not firing method due to invalidation. Check this working code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-date-input-directive-production</title>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.changed = 0;
$scope.example = {
value: new Date(1999, 0, 1, 15, 30, 0)
};
$scope.change = function(){
$scope.changed ++;
}
}])
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Picktime:</label>
<input type="time" time id="exampleInput" name="input" ng-model="example.value" placeholder="yyyy-MM-dd" required="" ng-change="change();" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.time">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "HH:mm"}}</tt>
<br />
<div>The time has been changed
<ng-pluralize count="changed" when="{'0': '{} times.',
'one': '1 time.',
'other': '{} times.'}"></ng-pluralize>
</div>
</form>
<!--<form name="myForm" ng-controller="DateController as accvm">-->
<!-- <div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">-->
<!-- <span class="input-label" ng-i18next="TIME"></span>-->
<!-- <input name="time" type="time" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />-->
<!-- </div>-->
<!-- <div ng-messages="accvm.addForm.time.$error">-->
<!-- <div class="form-error" ng-message="required"><span ng-i18next="VALIDATION_PROJECT"></span></div>-->
<!-- <div class="form-error" ng-message="max"><span ng-i18next="VALIDATION_TIME_FUTURE"></span></div>-->
<!-- </div>-->
<!-- {{changed}} {{accvm.addForm.time.$invalid}}-->
<!--</form>-->
I think the problem is with the different abbreviation that you are using in your controller and in your template, changing accvm for vm it's working fine for me.
Here's your JSFiddle updated: http://jsfiddle.net/j25jwtL2/58/
I'm sorry for disturbing, i'm having an issue with Angular.
Quite new to the framework, i'm trying to set a formulary with a select having options. But for some reason, in the html page, I have a list of countries but it's empty.
Could anyone give an hint on how to get through it please ?
Thanks in advance
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>NIF</legend>
<!-- Text input-->
<div class="form-group">
<md-input-container>
<label class="col-md-4 control-label" for="textinput">NIF</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text"
placeholder="Entrer le NIF" class="form-control input-md"
required="" ng-model="data.nif">
</div>
</md-input-container>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">Pays</label>
<div class="col-md-4" ng-controller="countryController">
<select ng-model="selectedCountry" class="form-control"
ng-options="location as location.name for location in locations">
<!--<option ng-value="country" ng-repeat="country in countries"></option>-->
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="Entité">Entité</label>
<div class="col-md-4">
<select id="Entité" name="Entité" class="form-control"
ng-model="data.entity">
<option value="Personne physique">Personne physique</option>
<option value="Personne morale">Personne morale</option>
</select>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for=""></label>
<div class="col-md-4">
<button id="" name="" class="btn btn-primary center-btn">Lancer la recherche</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
angular.controller('countryController', function($scope) {
$scope.locations = [
{ name: 'A' },
{ name: 'B' },
{ name: 'C' }
];
$scope.selectedCountry = { name: 'A' };
});
Correct the default selected reference.
So change $scope.selectedCountry = { name: 'A' }; to $scope.selectedCountry = $scope.locations[0];
Working Demo:
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.locations = [{
name: 'A'
},
{
name: 'B'
},
{
name: 'C'
}
];
$scope.selectedCountry = $scope.locations[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select ng-options="location as location.name for location in locations" ng-model="selectedCountry"></select> {{ selectedCountry }}
</fieldset>
</div>
I just found out I could create multiple modules but not put more than one ng-app in the same page.
It's working perfectly now.
In my project I am facing an issue that ng-if is not working. I want to remove/add text field when value of $scope.edit changes.
I have created a simplest of example in the jsfiddle below.
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.name = "Johny";
}
http://jsfiddle.net/U3pVM/32009/
Your Fiddle may not work because you are using Angular 1.0.1 which has some issue in ng-if.
Solution 1
If you are really using this version, you can replace ng-if by ng-show (which will create hidden elements in the DOM).
<div ng-show="edit">
Demo on JSFiddle using ng-show
Solution 2
Anyway, the best solution would be to use Angular 1.2+ which fixes ng-if bugs in ng-repeat. As you can see in the following snippet, I didn't change your code, and it works.
Demo on JSFiddle using ng-if
Some observations :
Seems that your angular version is old. hence, ng-if is not working.
If you want to use only existing angular version then you can use ng-show instead of ng-if.
Demo with ng-if :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Demo with ng-show :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Use ng-show instead
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
DEMO
Update the angular version with 1.2 or above with ng-if
angular.module('myApp', [])
.controller('TestCtrl', function($scope) {
$scope.name = "Johny";
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS </title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</body>
</html>
a calculator that add value from two textbox using Add button display result in another textbox in html
<ion-content>
<div class="tbox">
<label>
<input type="number" placeholder="Number 1" ng-model="N1">
</label>
<label>
<input type="number" placeholder="Number 2" ng-model="N2">
</label>
<label>
<input type="number" placeholder="Result" ng-model="R">
</label>
</div>
<label>
<button class="button button-block button-positive"> Add </button>
</label>
</ion-content>
user input from textbox should be added up when add button is been pressed i dont know how to develop it in angularjs
You are not assigning a+b to result variable.Assign to result variable and you will get your expected result.Example on plnkr
Add button in your template and bind click event. On click event just assign your a+b in result variable.
I think you are looking something like this.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example </title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<p>
First Number:<input type="number" ng-model="a" />
</p>
<p>
Second Number: <input type="number" ng-model="b" />
</p>
<p>
Result : <input type="number" ng-model="result" />
</p>
<input type="button" value="Add" ng-click="add()">
<p>
Sum: {{ a + b }}
</p>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.add = function(){
$scope.result = $scope.a + $scope.b;
};
});
</script>
</html>
Just try this
<input type="number" value="{{a+b}}" />
<p >
Sum: <span ng-bind="a+b"></span>
</p>
I'm seeing weird flickering when mousing over the ng-clip enhanced button. I've got the ng-clip enhanced button being shown/hid when the enclosing div is moused over. As the user moves the mouse over the button, it flickers. I'm assuming it's something to do with event handling between Zeroclipboard and the Angular code?
Here is a Plunker page displaying the issue: http://plnkr.co/4gFy9U
The code from Plunker:
<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl" ng-mouseover="isHovering = true" ng-mouseout="isHovering = false">
<div class="page-header">
<h1>ngClip <small>example</small></h1>
</div>
<form>
<div style="background:red;" class="form-group">
<label >Copy #1</label>
<input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
<button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
</div>
<br/><br/><br/>
<textarea class="form-control" rows="3" placeholder="paste here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider', function(ngClipProvider) {
ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
ngClipProvider.setConfig({
bubbleEvents: false
})
}]);
myapp.controller('myctrl', function ($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body >
</html>
I was also having this issue. I fixed by using ng-mouseenter on an outer div instead of using ng-mouseover and ng-mouseleave on an inner div instead of ng-mouseout. No flicker!
So:
<div ng-app="myapp" ng-mouseenter="isHovering = true">
<div class="container" ng-controller="myctrl" ng-mouseleave="isHovering = false">
<div class="page-header">
<h1>ngClip <small>example</small></h1>
</div>
<form>
<div style="background:red;" class="form-group">
<label >Copy #1</label>
<input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
<button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
</div>
<br/><br/><br/>
<textarea class="form-control" rows="3" placeholder="paste here"></textarea>
</form>
</div>
</div>