Here is my view for a list.
back...
<ul>
<input type="text" ng-model="search">
<li ng-repeat="item in items | filter:search | orderBy:'date'">
{{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}
<button ng-click="deleteItem(item.ID)">del</button>
</li>
<form>
<input type="text" ng-model="itemName">
<input type="date" min="{{ date }}" max="{{ maxDate }}" value="{{ date }}" ng-model="itemDate">
<button ng-click="addItem()">add</button>
</form>
</ul>
On click my contoller adds a new item to the view, which works fine. Now i want to animate only the new item with css3. Therefore the new item needs a class. How can i achieve this with angular?
This should assign class the-class to the last element of the list dynamically:
<li ng-class="{'the-class': $last}" ng-repeat="item in items | filter:search | orderBy:'date'">
{{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}
<button ng-click="deleteItem(item.ID)">del</button>
</li>
If you're using Angular 1.1.5, you can use ngAnimate enter event instead which is precisely designed for this kind of situation.
Have a look at http://www.nganimate.org/ and http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimate
If you use a function to add an Item, you could also set a variable to know which Id is the last inserted while adding the item to the list
First, you can see what I did here http://jsfiddle.net/DotDotDot/Eb2kR/
I just created a lastInsertedId variable, which I use to add a class in the ng-repeat :
<span ng-class='{lastinserted: item.ID==lastInsertedId}'>{{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}</span>
I had no idea how you implemented you addItem method and what are your IDs, so I created my own method and I assumed your IDs are unique numbers, but it could work with anything (hoping you can find a unique set of data)
$scope.addItem=function(){
var dd=new Date($scope.itemDate);
$scope.items.push( {"ID":$scope.items.length+1, "heading":$scope.itemName, "date":dd.getTime()});
$scope.lastInsertedId=$scope.items.length;
}
I change the last inserted id, which will apply the selected class to the item
You could also unset the lastInsertedId value in the delItem() method
If you have a more difficult logic (here I assumed you had unique IDs) you can also use a function in the ng-class. Here, on my example it wouldn't be hard to code :
$scope.amITheOne=function(item){
return item.ID==$scope.lastInsertedId;
}
then
<span ng-class='{lastinserted: amITheOne(item)}'>
It doesn't change much with a simple logic, but you could totally have a logic based on the ID, the name and the date for example
Have fun
Related
This is the requirement where the id and the device has to be displayed alongside the selected option. How to display this additional data using Angular material select.
Note: Not in the option but in selected input tag
<mat-select required formControlName="sensorId">
<mat-form-field class="w-100">
<mat-label>
<em class="fa fa-search f-20"></em>
</mat-label>
<input matInput #sensorFilter />
</mat-form-field>
<mat-option
*ngFor="let sensor of sensors | filter: sensorFilter.value"
[value]="sensor.name"
>
{{ sensor?.name | translate }}
</mat-option>
</mat-select>
This is the sensor object properties
public static fields: Array<string> = [
'id',
'object_id',
'unit_type',
'device',
'sensor_type',
'name'
];
1
If I understand your question correctly, you simply need to add the id and device id as an interpolation in the mat-option element. Something like this:
<mat-option *ngFor=" let widget of widgetsEnum | filter: widgetFilter.value" [value]="widget.id">
{{ device.id }} {{ widget.id }} {{ widget.name }}
</mat-option>
Since there is no 'device' or 'device id' shown in your code, I will assume that it is available in your controller and is called device. If not you will need to make it available in the controller and give it the appropriate name. I am also assuming that when you say 'id' you mean the widget id since there is no other id listed in your code.
As I mentioned in topic i try do depends checkboxes from dropdownlist. I fill data to my dropdownlist from controller:
#RequestMapping(value = "/all", method = GET)
public List<Warehouse> findAll(){
return warehouseService.findAll();
}
$http
.get('/api/warehouses/all')
.then(function (response) {
$scope.warehouses = response.data;
});
Every Warehouse object have a List with package:
#OneToMany
private List<Package> packages = new ArrayList<>();
Now when i am creating Route and when i select one Warehouse from dropdownlist i wanna fill checkboxes from List from currently selected Warehouse.
Select Warehouse:
<select ng-model="credentials.warehouseStart">
<option ng-selected="credentials.warehouseStart == x" id="startId" ng-value="x" ng-repeat="x in warehouse" >{{x.name}}</option>
</select>
And checkboxes:
<div flex-xs flex="50">
<md-checkbox aria-label="Select All"
ng-checked="isChecked()"
md-indeterminate="isIndeterminate()"
ng-click="toggleAll()">
<span ng-if="isChecked()">Un-</span>Select All
</md-checkbox>
</div>
<div class="demo-select-all-checkboxes" ng-model="credentials.packages" flex="100" ng-repeat="item in packages">
<md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
{{ item.name }} <p> </p>
{{ item.user.firstName }} {{ item.user.lastName }}
</md-checkbox>
</div>
Checkbox fill:
$http
.get('/api/package/all')
.then(function (response) {
$scope.packages = response.data;
});
It is possible if i select one object in Dropdowlist(Warehouse) can i get a object id? Then i think i can get a correct chebkoxes by directive /package/all/{id} ?
I am basing my answer of your comment that every warehouse has a list of packages. That said, I am expecting packages to be a part of your GET call to /api/warehouses/all.
First, I would change your warehouse selection to use ngOptions:
<select ng-model="selected.warehouse"
ng-options="x.name for x in warehouses"></select>
Then, to list the packages:
<div ng-model="selected.packages"
ng-repeat="item in selected.warehouse.packages">
<input type="checkbox"
ng-checked="exists(item, selected)"
ng-click="toggle(item, selected)"> {{ item.name }}
<p> </p>
{{ item.firstName }} {{ item.user.lastName }}
</div>
I have created a sample here. Within, I have added a couple of wrappers around the package list in your ui using ngIf, but that's not necessary, but figured you'd probably have a view area to show based on whether or not a selection was made.
I have an ng-repeat with a comment input inside the loop. With a ng-model="comss.comment", however when I start to type on the first input, I can see the typing on the 2nd and all of the other inputs. How can I stop this? I've tried adding a name with a unique ID however that did not work.
Here is my code:
<li class="item" style="margin-top:20px;" ng-repeat="schedule in discoverloaded | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">
<input type="text" ng-model="comss.comment" required='required' placeholder="Write a comment..">
</li>
Since you're in a loop, accessing comss.comment for each loop is going to be the same model, you need to modify your template and the model slightly:
<li class="item" style="margin-top:20px;"
ng-repeat="schedule in discoverloaded | filter:scheduleSearch | limitTo:numberOfItemsToDisplay track by $index">
<input type="text" ng-model="comss[$index].comment"
required='required' placeholder="Write a comment..">
</li>
In the controller it would be a larger object, so for a loop of two items in discoverloaded, you would have this in comss:
comss = {
0: {
comment: ''
},
1: {
comment: ''
}
};
In the template you can't access it via comss.0.comment, which is why you use comss[$index].comment as you're inside the loop when you assign the model.
I want to use ng-repeat object in ng-model value as sub string.. can i use this?? My scenario is:
<form id="booking_form" name="booking_form" ng-app="myApp" ng-submit="tasksubmit()">
<ul class="items-list">
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<div class="items-list-item-image">
<p>
<input type="checkbox" ng-model="tasksubmit{{task.id}}" />
</p>
</div>
<div class="items-list-item-detail">
<p>
<strong>{{task.title}}</strong>
</p>
</div>
</li>
</ul>
</form>
in < input type = checkbox > i want to generate dynamic ng-model with prefix of tasksubmit (this is initialized in controller as $scope.tasksubmit = {} ). Any body please help me out in this problem.....
If I understand correctly you want all task.id as property inside your tasksubmit object as you have initialized it as object in your controller so you can do as below:
<input type="checkbox" ng-model="tasksubmit[task.id]" />
Just add model with ngRepeat's instance property
Like this
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<input type="checkbox" ng-model="task.isChecked" />
</li>
You'll find value of isChecked from $scope.taskslist
JSFIDDLE
I have an HTML for select tag, with this code :
<div ng-controller="Models">
<select ng-model="myModel" ng-options="Model.name for Model in Models" class="form-control"></select>
{{ {selected_Model:myModel.name} }} {{ {selected_Model:myModel.id} }}
</div>
and I want it to show only myModel.id==1.
how can I do it ?
I think this question needs a bit more of an explanation.
Do you mean you want to display a select for each model in models however only if the model.id ==1?
You can do this with a filter, while the models are being written to the page in your select box this filter checks if they have an .id == 1 and if TRUE then allows it to be written into the select.
I would imagine however that this means you'll only have 1 item in your select box as duplicate id's in objects are bad news bears.
angular.module('YOURAPPNAME', [])
.filter('myModelFilter', function() {
return function(myModel) {
if (myModel.id == 1) {
return myModel;
}
};
})
<div ng-controller="Models">
<select ng-model="myModel" ng-options="Model.name for Model in Models | myModelFilter" class="form-control"></select>
{{ {selected_Model:myModel.name} }} {{ {selected_Model:myModel.id} }}
</div>
EDIT: P.s.
Calling a controller and objects in your controllers "Model" and "Models" is confusing, I'd recommend choosing a different naming convention as AngularJS is an MVWhatever framework the term "Model" has a very different meaning to what you're using it for.
You could this on HTML side itself by using filter with strict checking true like ng-options="Model.name for Model in Models | filter: {id: 1}: true"
Markup
<div ng-controller="Models">
<select ng-model="myModel" class="form-control"
ng-options="Model.name for Model in Models | filter: {id: 1}: true" >
</select>
{{ {selected_Model:myModel.name} }} {{ {selected_Model:myModel.id} }}
</div>