I'm working with ng-repeat .In the ng-repeat i'm repeating panel.The panel body consist of two part .First part is a paragragh which i fetch from the database using $http.get(). In the second part i have a button (edit button).When i click the edit button the paragraph in the first part should be hidden and text-area should appear with the content in the paragraph as default.But when i'm trying to achieve this im getting an idea when i click one edit button all of my paragragh hides and the textarea appear .How can i restrict it .
$scope.editorEnabled = false;
$scope.enableEditor = function() {
$scope.editorEnabled = true;
};
<div ng-repeat="(key,rec) in recordcomment">
<div class="row">
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-heading">
heading
</div>
<div class="panel-body" style="background-color:white;">
<p ng-hide="editorEnabled">{{rec.comment}}</p>
<textarea ng-model="rec.comment" ng-show="editorEnabled"></textarea>
<button class="btn btn-primary pull-right" ng-click="enableEditor()">Edit</button>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body" style="background-color:white;">
<p ng-hide="rec.editorEnabled">{{rec.comment}}</p>
<textarea ng-model="rec.comment" ng-show="rec.editorEnabled"></textarea>
<button class="btn btn-primary pull-right" ng-click="enableEditor(rec)">Edit</button>
</div>
$scope.enableEditor = function(context) {
context.editorEnabled = true;
};
Use rec instead of this
Because this means current context of ng-repeat directive..
So to make it effective we need to modify the object...
Hence we need to pass it as i have use rec in function param
Try this in case do comment
Add the editorEnabled object with ng-rpeat object. so it will be consider with the array object. and you can pass this current object via click function() and set true/false the editorEnabled object.
Code looks like.
<div class="panel-body" style="background-color:white;">
<p ng-hide="rec.editorEnabled">{{rec.comment}}</p>
<textarea ng-model="rec.comment" ng-show="rec.editorEnabled"></textarea>
<button class="btn btn-primary pull-right" ng-click="enableEditor(this)">Edit</button>
</div>
$scope.enableEditor = function(context) {
context.editorEnabled = true;
};
Related
Problem: I have a button in a form that opens a modal window(a component). In this modal window the user selects the files he wishes to upload. After the clicks in button submit in the modal window. It closes the modal and stays in the previous component. I need to take the name of the files selected to the previous component and show to the user.
The modal html
In here i have the modal html where the user selects which files he wants to upload.
After that he clicks in submit and is sending the names of the files to an array.
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h4 class="modal-title">Selecionar Assets</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group text-center">
<input type="file" name="image" (change)="onSelectFile($event)" multiple />
</div>
<div class="row">
<div class="col">
<p class="text-center h4">Asset</p>
</div>
<div class="col">
<p class="text-center h4">Name</p>
</div>
</div>
<div class="row" *ngFor='let url of urls let i = index'>
<div class="col">
<div class="text-center image-preview img-responsive mb-3">
<img [src]="url" height="100" width="100"/>
</div>
</div>
<div class="col trimText">
<div class="text-center mb-3">
<p class="text-center"> {{ names[i] }}</p>
</div>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-primary" (click)="onSubmit(); activeModal.dismiss('Cross click')">Submit</button>
</div>
</div>
</div>
The modal component.ts
In here I'm iterating over the multiple files the user selected and get the name of those files.
When clicked on the button submit i send that array to the component that opens the modal.
#Input() names:Array<string> = [];
#Output() namesEntry: EventEmitter<string[]> = new EventEmitter();
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; i < filesAmount; i++) {
this.names.push(event.target.files[i].name);
var reader = new FileReader();
reader.onload = (event:any) => {
this.urls.push(event.target.result);
}
reader.readAsDataURL(event.target.files[i]);
}
console.log(this.names);
}
}
onSubmit() {
//send to form name of the assets
this.activeModal.close(this.names);
}
The form html
In this part of the component is where I want to show the name of the files that i had in the modal. The problem is that is never showned, even and the array names is not empty and the isActive is true
<div id="assets" class="text-center" *ngIf="isActive; else notActive">
<ng-template #notActive>
<div *ngFor='let name of names'>
<p class="h6">{{name}}</p>
</div>
</ng-template>
</div>
The form component.ts
Here is where I retrieve the array of names from the modal to this component and when i do console.log of this.names return the array with the names and this.isActive returns true.
names:Array<string> = [];
isActive = false;
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(AssetComponent, {size:"lg", backdrop: 'static'});
modalRef.componentInstance.title = 'asset';
modalRef.result.then((result) => {
if (result) {
this.names = result;
this.isActive = true;
}
});
}
Please change the code to following.
<div id="assets" class="text-center" *ngIf="isActive">
<div *ngFor='let names of names'>
<p class="h6">{{name}}</p>
</div>
</div>
Your condition was wrong. It will not render the data because of isActive flag set to true and template was set to render when the isActive flag is false.
Keep in mind, Template(<tempalte #ref></template>) inside the *ngIf will only available when the condition is met.
For example,
<div *ngIf="test else nodData">
Data Available
<template #nodData>No Data available</template>
</div>
Template nodData will not be available unit the ngIf condition met. So the noData wont display. So always keep the ref outside ngIf block for else conditions
<div *ngIf="test else nodData">
Data Available
</div>
<template #nodData>No Data available</template>
Please update your template to render correctly,
In *ngIf condition, template should be outside the condition element
<div id="assets" class="text-center" *ngIf="isActive; else notActive">
<div *ngFor='let names of names'>
<p class="h6">{{name}}</p>
</div>
</div>
<ng-template #notActive>
// Your message or code
</ng-template>
I'm working on my angular e2e test project. I've the following html generated as part of my ng-repeat with out any id, I would like to choose the second element that is with heading Topic - xyz and also then click the button which is a child of it's sibling. How can I do that.
<div class="row ng-scope" ng-repeat="post in posts">
<div class="col-md-7">
<h4 class="ng-binding">Topic - ABC</h4>
<div class="text-right">
<button class="btn btn-none btn-sm" ng-click="posts.newPost()">
Create Post
</button>
</div>
</div>
</div>
<div class="row ng-scope" ng-repeat="post in posts">
<div class="col-md-7">
<h4 class="ng-binding">Topic - XYZ</h4>
<div class="text-right">
<button class="btn btn-none btn-sm" ng-click="posts.newPost()">
Create Post
</button>
</div>
</div>
</div>
<div class="row ng-scope" ng-repeat="post in posts">
<div class="col-md-7">
<h4 class="ng-binding">Topic - EFG</h4>
<div class="text-right">
<button class="btn btn-none btn-sm" ng-click="posts.newPost()">
Create Post
</button>
</div>
</div>
</div>
This is what I've tried to so far which is not working
var button = $$(by.repeater('post in posts')).get(1).$(by.css('[ng-click="posts.newPost()"]'))
button.click(); // click is not showing up
$$(by.repeater('post in posts')) and $(by.css('[ng-click="posts.newPost()"]')) - these are not correct syntax of using the by.repeater() or by.css() locator. $$ is a shortcut for the element.all(by.css()) and should not be used for the "repeater" locator. If you use $(), there is no need to wrap your selector into by.css():
var button = element.all(by.repeater('post in posts')).get(1).$('[ng-click*=newPost]');
button.click();
If you want to filter the repeater element by the topic name, you can use .filter():
var button = element.all(by.repeater('post in posts')).filter(function (post) {
return post.$("h4").getText().then(function (postTitle) {
return postTitle === "Topic - XYZ";
});
}).get(1).$('[ng-click*=newPost]');
button.click();
Also see if using the by.buttonText locator would work as well (a little bit cleaner):
var post = element.all(by.repeater('post in posts')).get(1);
var button = post.element(by.buttonText("Create Post"));
button.click();
I have a editable-select nested inside other, when I submit the nested editable-select changes, it does not call the onaftersave assigned function ('vm.addOperation()'), it also shows the outter editable-select edit form.
I want it just to show the nested edit form and the function call to work.
My html code:
<div editable-select="vm.selectedUser"
e-ng-options="user.objectId as user.displayName for user in vm.users"
onshow="vm.getUsers()"
onaftersave="vm.addUser()">
<div class="container" ng-repeat="u in entity.authorizedUsers">
<div class="row">
<div class="col-xs-2">
{{u.id}}
</div>
<div class="col-xs-4">
<div editable-select="vm.selectedOperation"
e-ng-options="operation.id as operation.name for operation in vm.operations"
onshow="vm.getOperations()"
onaftersave="vm.addOperation()">
<div class="container" ng-repeat="op in u.authorizedOperations">
<div class="row">
<div class="col-xs-3">
{{op.name}}
</div>
<div class="col-xs-push-2">
<button class="btn btn-xs btn-danger"
ng-click="vm.removeOperation(entity.id, u.id, op.id)">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-push-4">
<button class="btn btn-xs btn-warning pull-left"
ng-click="vm.removeuser(entity.id, u.id)">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
</div>
</div>
I've manage to fix the problem with the following code. It's an ugly workaround tho, please if someone has a more elegant solution I'd very much appreciate it.
in html:
<div editable-select="vm.selectedOperation"
e-form ="nestedForm"
onshow="vm.getOperations()"
ng-click="nestedForm.$show(); vm.xEditableNestedFormFix(nestedForm); $event.stopPropagation()"
e-ng-options="operation.id as operation.name for operation in vm.operations"
onaftersave="vm.addOperation()">
in js:
vm.xEditableNestedFormFix = function (form) {
var editorElement = form.$editables[0].controlsEl[0].firstChild;
editorElement.onclick = function (event) {
event.stopPropagation();
}
var submitButton = form.$editables[0].buttonsEl[0].firstChild
submitButton.onclick = function (event) {
form.$submit();
event.stopPropagation();
}
var cancelButton = form.$editables[0].buttonsEl[0].lastChild
cancelButton.onclick = function (event) {
event.stopPropagation();
}
}
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.
While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.
I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.
Can someone help me understand what's going wrong here and probably a better way to do this if possible.
I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.
Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?
//locationsapp.js var locationsApp = angular.module('locationsApp', []);
var venues = [{
id: "Flknm",
name: "ship",
}, {
id: "lelp",
name: "boat",
}, {
id: "myp",
name: "yacht",
}, ];
var shortlistedVenues = [];
var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);
locationsApp.controller("getvenues", function($scope) {
$scope.venues = venues;
$scope.shortlistThis = function(venue) {
console.log(venue);
if (shortlistedVenues.indexOf(venue) == -1) {
shortlistedVenues.push(venue);
//alert('If');
} else {
console.log('already shortlisted')
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="locations" ng-app="locationsApp">
<div ng-controller="getvenues">
<div ng-repeat="venue in venues" ng-mouseover="" class="venue">
<div ng-controller="manageInfo">
<div class="row-fluid">
<div class="control" ng-click="showInfo()">
</div>
<div class="maps" class="info">
<div ng-class="class">
<div class="close-info" ng-click="hideInfo()">
<i class="fa fa-times">
</i>
</div>
<div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
<div class="">
<div class="row-fluid myclass">
<div class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
Shortlist{{$index}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Full Info Container -->
</div>
</div>
</div>
</div>
<div class="compare">
<button type="button" class="btn btn-default btn-lg btn-sup">
Compare ( {{shortlistedVenues.length}} )
</button>
</div>
</div>
</div>
</div>
</div>
The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index
HTML
<div ng-if="selected==$index" class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup"
ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
</div>
</div>
</div>
& then put ng-click="selected='$index'" on ng-repeat div like
<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">
Working Fiddle
Hope this could help you, Thanks.
I'm using ui.bootstrap and I'm trying to use the collapse function.
In my code what's happening is the default state is expanded, when the load weather button is clicked the div is collapsed and after the data has been loaded it expands.
What do I need to do to my code to get it to have a collapsed state on page load and only expand/contract when the button has been clicked?
Here's my code:
<div ng-controller="weatherCtrl">
<div>
<button ng-model="hotel" class="btn btn-default"
ng-click="loadWeather(hotel); isCollapsed = !isCollapsed">load weather</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</div>
.controller('weatherCtrl', function ($scope, weather) {
$scope.loadWeather = function (hotel) {
console.log('loadWeather')
console.log('hotel')
console.log(hotel)
weather.get({}, function (data) {
console.log('data')
console.log(data)
$scope.isCollapsed = false;
})
}
})
I got it working by using ng-init on a parent element:
<div ng-controller="weatherCtrl" ng-init="isCollapsed = !isCollapsed">
<div>
<button ng-model="hotel" class="btn btn-default"
ng-click="loadWeather(hotel)">load weather</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</div>