I have two tables: site and ip.
site: site_id,name
ip: ip_id,site_id,ip_adress
I have to show a list of ip_adress of a site.
html
<div class="form-group" style="margin-bottom: 0px;">
<label class="col-sm-6 control-label">
<button style="margin-bottom:5px;" ng-click="addIp($index)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</label>
<div class="col-sm-6">
<ul style="list-style-type: none">
<li ng-repeat="ip in site.ips track by $index">
<div class="input-group" >
<input type="text" class="form-control input-sm" name="ip_adress" style="display: inline;" ng-model="ip.ip_adress" required />
<div class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle" ng-click="removeIp(site, ip, $index)"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
JavaScript
$scope.addIp = function(index){
$scope.sites[index].ips[index].ip_adress.push("");
}
It throws this error:
$scope.sites[index].ips[index].ip_adress.push is not a function
Ips is a Set of Ip object, and ip_adress is a String.
How can i resolve this ?
You should push to your array like: $scope.sites[index].ips.push(<here_goes_your_object_with_ip_string>);
if ips is an array
Use
$scope.addIp = function(index){
$scope.sites[index][ips[index]]['ip_adress'].push("");
}
Related
QUESTION:
Perform a "find()" excluding certain elements and their descendants.
REAL CASE:
Code Sample
The purpose of the code below is try to select all elements within $("#lbr_placehld"), but exclude all those that have the attribute lbr_mval_placehld and its descendants.
$("#lbr_placehld").find(":not([lbr_mval_placehld])");
HTML sample
<span id="lbr_placehld" lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_bases_n_forms#1">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome da Base</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_base" name="mg_bases_n_forms#1.str_id_base" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome da Base" lbr_mval_fld_nm="str_nm_base" name="mg_bases_n_forms#1.str_nm_base" type="text" autocomplete="off" lbr_fdly_nm="Nome da Base 2">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
<div lbr_mval_container="" class="widget-box transparent">
<div class="widget-header widget-header-small">
<h6 class="smaller"></h6>
<div class="widget-toolbar">
<a href="#" title="Remover último item" class="lbr-tooltip" lbr_mval_op="rmlast" onclick="lbrad_MultivaluedManipulate(this);return false;" style="display: inline;">
<i class="fa fa-remove red border-icon"></i>
</a>
<a href="#" class="lbr-tooltip" lbr_mval_op="add" onclick="lbrad_MultivaluedManipulate(this);return false;" title="Adicionar item">
<i class="fa fa-plus blue border-icon"></i>
</a>
<a href="#" title="Remover todos itens" class="lbr-tooltip" lbr_mval_op="rmall" onclick="lbrad_MultivaluedManipulate(this);return false;" style="display:none;">
<i class="fa fa-remove red border-icon"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-main">
<span lbr_mval_grp_path="mg_forms" lbr_mval_last_idx="3">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_bases_n_forms#1.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_bases_n_forms#1.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 2">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#0">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#0.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#0.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 1">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#1">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#1.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#1.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 2">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#2">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#2.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#2.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 3">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#3">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#3.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#3.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 4">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</span>
var $topElement = $("#lbr_placehld");
// find every nested element
$topElement.find('*')
// filter out any element that has the attribute,
// or is a descendant of an element that has the attribute.
// EXCLUDE the top element from the attribute check
.filter(function(){
return $(this).closest('[lbr_mval_placehld]').not($topElement).length === 0;
});
A more elaborate approach using #Taplar's "core" ideia.
For more explanation see the code notes below...
// NOTE: Make a JQuery find excluding certain elements and their descendants. By Questor
// . jqPntElOrPntQry - Ancestor over which a ".find()" will be executed using the
// "string" in jqFind. If it is a string then execute it as a JQuery query to define
// the ancestor. Not being a string and not being undefined then it will be the defined
// ancestor (resulting from a JQuery query). If it is undefined then execute the string
// in jqFind as a JQuery query to define the ancestor;
// . jqFind - Perform as a JQuery query on a ".find()" on the ancestor jqPntElOrPntQry.
// When jqPntElOrPntQry is undefined then, simplistically, execute the string in jqFind
// as a JQuery query for the elements you want to find excluding the elements that
// match jqExcl JQuery query and their descendants;
// . jqExcl - A JQuery query that matches the elements you want to exclude along with
// their descendants.
function findExclElmtsNDesc(jqPntElOrPntQry, jqFind, jqExcl){
// NOTE: The approach below makes a filter excluding all elements found in jqExcl
// JQuery query and their children, but excludes from that filter the "parent"
// element (jqElInst/jqFind) if it is also found in jqExcl jqExcl query. By Questor
// [Ref.: https://stackoverflow.com/a/58402312/3223785 ]
var fExclElmtsNDescRtn;
if (typeof jqPntElOrPntQry === "string" ||
jqPntElOrPntQry instanceof String) {
// [Ref.: https://stackoverflow.com/a/9436948/3223785 ]
jqPntElOrPntQry = $(jqPntElOrPntQry);
fExclElmtsNDescRtn = jqPntElOrPntQry.find(jqFind);
} else if (typeof jqPntElOrPntQry !== "undefined") {
fExclElmtsNDescRtn = jqPntElOrPntQry.find(jqFind);
} else {
// [Ref.: https://stackoverflow.com/a/16975373/3223785 ]
fExclElmtsNDescRtn = jqPntElOrPntQry = $(jqFind);
}
// NOTE: Find every nested element. By Taplar
fExclElmtsNDescRtn = fExclElmtsNDescRtn
// NOTE: Filter out any element that has the attribute, or is a descendant
// of an element that has the attribute. EXCLUDE the target element from the
// check. By Taplar and Questor
.filter(function(){
return $(this).closest(jqExcl).not(jqPntElOrPntQry).length === 0;
});
return fExclElmtsNDescRtn;
}
Thanks! =D
I have problem with ng-repeat and [$index]. My problem is that I would like values from all inputes (look on fiddle and click "+") store in one array and next save in database. The problem is at the very beginning that I can't insert inputs values in one array (first array isn't insert into array). I try use:
ng-repeat="input in inputs track by $index"
fiddle:
https://jsfiddle.net/j6uwhb6v/4/
It's not working because the first input is outside of the ng-repeat so it doesn't have an $index... Here's a simple fix:
HTML:
<div ng-app="productController" ng-controller="productCtrl" class="row-fluid">
<div class="col-md-12">
<div class="form-group">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">
<i class="fa fa-pencil"></i>
</div>
<input ng-disabled="product.disabled" type="text" ng-model="description[0]" name="description" class="form-control" placeholder="Description..." required>
<div class="input-group-addon">
<a ng-click="addfield()" class="add-field">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div ng-repeat="item in inputs track by $index">
<div class="input-group mb-2 mr-sm-2 mb-sm-0 repeat-input">
<div class="input-group-addon">
<i class="fa fa-pencil"></i>
</div>
<input ng-disabled="product.disabled" type="text" name="description" ng-model="description[$index+1]" class="form-control" placeholder="Description..." required>
</div>
</div>
</div>
</div>
{{description}}
</div>
JavaScript:
$scope.inputs = [];
$scope.addfield = function(){
$scope.inputs.push({})
}
$scope.description = [];
Working Code: JSFiddle
I'm trying to do the following : When you click on "Add Package" its pushes to an array a package where I can specify e.g. Package one, but within that I want to push multiple items (products) "Add Item". The problem is when I create a new package it works, but the items in each package is the same so when I add more to either dynamic package the items within is the same. I assume that's because the array is the same each time, how to I track that by index?
HTML:
<div class="col-12 order-box" ng-repeat="orderpackage in orderproductspackages track by $index">
<div class="col-12">
<label for="name_{{$index}}">Package Name</label>
<input type="text" ng-model="orderpackage.orderpackagename" name="name_{{$index}}" required>
</div>
<div class="col-12" ng-repeat="ordercontent in orderproductscontents track by $index">
<div class="col-2">
<label for="name_{{$index}}">Product</label>
<select ng-model="ordercontent.ordercontentname" name="name_{{$index}}" ng-change="onProductChange(ordercontent.ordercontentname,$index)">
<option ng-repeat="product in productResponse | orderBy:'productname'" value="{{product.productname}}">{{product.productname}}</option>
</select>
</div>
<div class="col-2">
<label for="name_{{$index}}">Quantity</label>
<input type="text" ng-model="ordercontent.ordercontentquantity" name="name_{{$index}}" ng-keyup="onProductChange(ordercontent.ordercontentname,$index)" required>
</div>
<div class="col-2">
<label for="name_{{$index}}">Price</label>
<input type="text" ng-model="ordercontent.ordercontentprice" name="name_{{$index}}" ng-change="onPriceChange(ordercontent.ordercontentname,$index)" disabled required>
</div>
<div class="col-2">
<label for="name_{{$index}}">Per {{ordercontent.ordercontentmeasurement}}</label>
<input type="text" ng-model="ordercontent.ordercontentpriceper" name="name_{{$index}}" disabled required>
</div>
<div class="col-2">
<label for="name_{{$index}}">Total</label>
<input type="text" ng-model="ordercontent.ordercontenttotal" name="name_{{$index}}" required disabled>
</div>
<div class="col-2">
<label for="name_{{$index}}">Options</label>
<a class="button critical small" ng-click="removeOrderContent($index)"><span class="fa fa-minus"></span> Remove</a>
</div>
</div>
<div class="col-12 m20-top p15 text-center add-api" ng-click="addOrderContent()">
<span class="fa fa-plus"></span> Add Item</a>
</div>
</div>
<div class="col-12 m20-top p15 text-center add-api" ng-click="addOrderPackage()">
<span class="fa fa-plus"></span> Add Package</a>
</div>
CODE SNIPPETS :
_this.addOrderPackage = function() {
_this.orderproductspackages.push({ ordernumber:_this.order.ordernumber });
}
_this.addOrderContent = function() {
_this.orderproductscontents.push({
ordercontentname:'',
ordercontentquantity:'1',
ordercontentprice:'',
ordercontentpriceper:'',
ordercontenttotal:''
});
}
Of course, all items in your packages are the same, because you use the same content array inside packages: ng-repeat="ordercontent in orderproductscontents". If I understand you right, you need this array orderproductscontents to be distinctive in each package. To do this store this array in package object, like this:
_this.addOrderPackage = function() {
_this.orderproductspackages.push({
ordernumber: _this.order.ordernumber,
contents: []
});
}
and then just ng-repeat="ordercontent in orderpackage. contents"
I just take a simple array and there is add more button in which i just push one more object to that array.
The array is ng-repeat which renders all the fields. My code are given below.
<div ng-init="core.iv=[{email:'',name:''}];">
<div ng-repeat="n in core.iv track by $index">
<div class="col-sm-6 pad0">
<div class="form-group">
<input type="email" class="form-control mIn" ng-model="n.email" placeholder="Email id" />
<span class="bar"></span>
</div>
</div>
<div class="col-sm-6 pad0">
<div class="form-group">
<input type="text" class="form-control mIn" ng-model="n.name" placeholder="Name" />
<span class="bar"></span>
</div>
</div>
</div>
<div class="col-xs-12 pad0 text-right">
<button class="btn btn-t-primary btn-sm" ng- click="core.iv.push({email:'',name:''});">add more</button>
</div>
</div>
I have the following code that creates a listing of calendar entries for the courtroom. Each individual case has a "status" dropdown that is set by the judge after the hearing is finished. I need to save this information to the database. I have added ng-change and it fires the function I ask it to. However, how can I get the selected value of the "status" dropdown that triggered the ng-change?
The code for my view is as follows:
<div ng-controller="CaseListCtrl">
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
>>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-change="getCalendar();">
<option ng-repeat="department in departments">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div>
<div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases | orderBy: ['sequence', 'AmPm', 'Sched_Time', 'Case_Number']">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.SeqNumber}}" />
<!-- Add hidden field to hold the CalendarID value for updating the sequence later-->
<input type="hidden" name="CalendarID_{{case.Case.CaseNumber}}" value="{{case.DailyEventCaseID}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case.CaseNumber}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case.CaseNumber}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case.CaseNumber}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
<select class="form-control input-mini" id="caseStatus" name="caseStatus" ng-model="case.StatusID" ng-change="setItem(case.DailyEventCaseID, case.Case.CaseNumber, case.EventDate, 'STA');" ng-options="caseStatus.Status for caseStatus in caseStatus track by caseStatus.Status" required></select>
{{case.Case.CaseTitle}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1" ng-repeat="event in case.Events">
<div class="hearing-time">{{case.EventDate | date: 'h:mm a'}}</div>
<div class="hearing-title">{{event.EventName}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
</div>
It turns out I had to modify the ng-options. This line of code:
<select class="form-control input-mini" id="caseStatus" name="caseStatus" ng-model="case.StatusID" ng-change="setItem(case.DailyEventCaseID, case.Case.CaseNumber, case.EventDate, 'STA');" ng-options="caseStatus.Status for caseStatus in caseStatus track by caseStatus.Status" required></select>
Got changed to:
<select class="form-control input-mini" id="caseStatus" name="caseStatus" ng-model="case.Status" ng-change="setItem(case.DailyEventCaseID, case.Case.CaseNumber, case.EventDate, 'STA');" ng-options="caseStatus.Status for caseStatus in caseStatus track by caseStatus.Status" required></select>
That wired everything up correctly and the save worked.