i need to send an item value from ng-repeat to a function as argument..But i cant do it..
I have this:
<div ng-repeat="company in companies" class="col-sm-4 animated bounceInLeft">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-save"></span>
<span class="panel-title text" ng-bind="company.company"/>
<span class="pull-right" style="margin-left:1em;">
<img src="images/build/loading.gif" ng-show="waitingResponse"></span>
<input type="text" class="form-control-cool input pull-right" placeholder="Nueva categoria"
ng-model="worktype" name="worktype" id="worktype"/> <strong>
<span>
<button data-toggle="tooltip" title="Añadir tipo de trabajo"
ng-click="addWorktype(company._id)"
class="btn btn-header btn-link animated pulse-btn"
style="color:#ffffff; font-size:20px;">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span></strong>
<span class="pull-right" style="margin-left:1em;">
</span>
<img src="images/build/loading.gif" ng-show="updatingWarehouses"></span>
</div>
But if i put the company._id inside the ng-click the input dont appears in HTML...Is there any way to do it this..?
Related
I'm studying a way to post some articles on my site but I can not control this example code snippet I found on the net, it should filter items based on the subject , but do not know how to do this .
For example , clicking on " jobs " should only filter messages about Jobs , but that tag I define what belongs to which category? How do I filter function as it should?
Full example here code
<div class="container">
<div class="row">
<div class="col-md-3">
<h4 class="">Search</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-default btn-sm btn-block hidden-lg hidden-md" data-toggle="collapse" data-target="#demo">Refine your search <span class="caret"></span>
</button>
<div id="demo" class="collapse in">
<hr>
<div class="list-group list-group">
<h4 class="">Category</h4>
<span class="badge">14</span> Notices <span class="label label-primary">New</span>
<span class="badge">3</span> Jobs
<span class="badge">25</span> Third item
<div id="categories" class="collapse">
<span class="badge">14</span> Active item
<button class="btn btn-default btn-sm btn-block" data-toggle="collapse" data-target="#categories">More <span class="caret"></span></button>
<hr class="">
<h4 class="">Viewing Options</h4>
<span class="badge">14</span> Upcoming Sessions
<span class="badge">3</span> OnDemand
<hr class="">
Archived Courses
Courses In Development
</div>
</div>
<div class="hidden-sm hidden-xs">
<hr>
<div class="well">
<h4>Premium Membership</h4>
<p>Gain unlimited access to our entire course library.</p>
<button class="btn btn-sm btn-warning">Learn more</button>
<hr>
<p class="text-center ">Already a member? Sign in.</p>
</div>
<hr>
<div class="well">
<h4>Course Catalog</h4>
<p><img src="http://placehold.it/400X500" class="img-responsive"></p>
<p>Everything you need to know about our webinars, including speaker bios, topics, and courses.</p>
<button class="btn btn-sm btn-block btn-warning">Download</button>
</div>
<hr>
<h4 class="text-center">CPE Partners</h4>
<p><img class="center-block" src="http://placehold.it/100X100"></p>
</div>
</div>
<div class="col-md-9">
<div class="well hidden-xs">
<div class="row">
<div class="col-xs-4">
<select class="form-control">
<option>Featured</option>
<option>Recently Added</option>
<option>Next Upcoming Session</option>
<option>A-Z</option>
<option>Z-A</option>
</select>
</div>
<div class="col-xs-8">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-th"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-th-list"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-list"></span></button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/1280X720" class="img-responsive">
</div>
<div class="col-sm-8">
<h3 class="title">How to Fight Fraud with Artificial Intelligence and Intelligent Analytics</h3>
<p class="text-muted"><span class="glyphicon glyphicon-lock"></span> Available Exclusively for Premium Members</p>
<p>Could card.</p>
<p class="text-muted">Presented by Ellen Richey</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/1280X720" class="img-responsive">
</div>
<div class="col-sm-8">
<h3 class="title">Big Payment Data: Leveraging Transactional Data to Ensure an Enterprise Approach to Risk Management</h3>
<p class="text-muted"><span class="glyphicon glyphicon-calendar"></span> July 23, 2014 # 1:30 PM</p>
<p> risk increases year over year, the amount of data being collected increases as well.
</p><p class="text-muted">Presented by Mike Braatz, Jonathan Eber</p>
</div>
</div>
<ul class="pagination pagination-lg pull-right">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
</div>
I am facing an issue working with panel collapse where I have a to create dynamic data-target and id's for panel because I have list of items in ng-repeat but the problem is the collapsible panel is not in the scope of the triggering panel
Here is the html code:
<div class="row">
<div class="col-xs-4" ng-repeat="topics in oJdDetails.topics">
<a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)">
<p class="col-xs-3">{{topics}}</p>
<span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true"></span>
</a>
</div>
</div>
<div id="{{'collapse'+'_' + index}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<p class="col-xs-6">Question Lists</p>
<div class="input-group col-xs-6">
<input type="text" class="form-control" ng-model="search" ng-change="fnSearchQList(search)">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" data-toggle="tooltip" data-placement="bottom" title="Search question " activetooltip aria-hidden="true"></span></span>
</div>
</div>
<div class="panel-body">
<button class="btn btn-primary pull-right" ng-click="fnshowInputQList()">
<div class="row">
<span class="col-xs-8">Add Question List</span><span class="glyphicon glyphicon-plus-sign col-xs-4" aria-hidden="true"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
Controller code is as below:
$scope.fngetQList = function(topics,index) {
$scope.index = index;
};
the array of topics is for example:["html","css","angular"]
I have no idea what I am doing wrong but when I click on 1st item the panel is getting opened with "collapse in " class but when I click on second item there still the "collapse in " class is getting appened which results in closing of the panel instead of opening the panel.
working example:
http://jsfiddle.net/Lvc0u55v/6625/
Any help would be appreciated.
i dont know if this is correct but it does what you want. i added the popup div inside the ng-repeat
<div ng-controller="MyCtrl">
<div class="row">
<div class="col-xs-4" ng-repeat="topics in topics">
<a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)">
<p class="col-xs-3">{{topics}}</p>
<span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true" />
<div id="{{'collapse'+'_' + $index}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<p class="col-xs-6">Question Lists</p>
</div>
<div class="panel-body">
<button class="btn btn-primary pull-right">Click here</button>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
Okay i have the following list:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;">Kursus
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i> Ret kursus
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This produces a list that looks something like this:
Now this works fine when there are few items however when the list is big enough and there scroll the drag and drop messes up. when i pick up an item on the middle of the page it always scrolls to the bottom and it is hard to get it to the top again!
Has anyone tried this before or know a way to fix it?
This question already has answers here:
How can I get the ID of an element using jQuery?
(20 answers)
Closed 7 years ago.
I am trying to get the ID property hanging off the getElementById method however it seems to return null or undefined. I have checked my HTML and it does in fact have an ID associated with it. I have given all my columns different ID's so having mulitple occurrences of the same ID is not the problem.
var columnID = $(this).closest(".col-md-4.column").id;
console.log(columnID);
var column = document.getElementById(columnID);
<div class="row" id="columns">
<div class="col-md-4 column" id="col1">
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body" id="testchart">
CHART GOES HERE
</div>
</div>
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
World
</div>
</div>
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
Hello
</div>
</div>
</div>
<div class="col-md-4 column" id="col2">
</div>
<div class="col-md-4 column" id="col3">
Try this:
var columnID = $(this).closest(".col-md-4.column").attr('id');
There is no id property. Use .attr('id').
Try
$(this).closest(".col-md-4.column").attr('id')
The attributes have to be accessed with the .attr method
I want to make input group inline in a list. I wrote the following code :
<div class="container-fluid">
<div class="row">
<ul class="list-inline pull-right">
<li>
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Cart <span class="badge">0</span>
</button>
</li>
<li>
<div class="input-group">
<input id="address" placeholder="City or Zipcode" class="form-control" type="textbox">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addressSearch">Search</button>
</span>
</div>
</li>
</ul>
</div>
</div>
I am not getting input group inline. Please help me to solve this.
You can wrap the first button and the group of elements that you want to in-line with the .input-group class. I am note sure if you're attached to using unordered lists but the code is more expressive if you use spans since what you're representing in on the page is not an unordered list of items.
<div class="container-fluid">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Cart <span class="badge">0</span>
</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div><!-- /input-group -->
</div><!-- /.row -->
</div>