fix labels in detail items

10 files changed, 38 insertions, 36 deletions

diff --git a/js/components/detailsItem/detailsItem_directive.js b/js/components/detailsItem/detailsItem_directive.js
index 2191c995..37099ddc 100644
--- a/js/components/detailsItem/detailsItem_directive.js
+++ b/js/components/detailsItem/detailsItem_directive.js
@@ -7,7 +7,8 @@ angular.module('contactsApp')
 		bindToController: {
 			name: '=',
 			data: '=',
-			model: '='
+			model: '=',
+			index: '='
 		},
 		link: function(scope, element, attrs, ctrl) {
 			ctrl.getTemplate().then(function(html) {
diff --git a/templates/detailItems/adr.html b/templates/detailItems/adr.html
index 41926d30..c5688ce8 100644
--- a/templates/detailItems/adr.html
+++ b/templates/detailItems/adr.html
@@ -3,27 +3,28 @@
 </select>
 <button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
 <div>
-	<label for="details-pobox">{{ctrl.t.poBox}}</label>
-	<input type="text" id="details-pobox" name="address" ng-model="ctrl.data.value[0]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()"  value="" />
+
+	<label for="details-pobox-{{ctrl.index}}">{{ctrl.t.poBox}}</label>
+	<input type="text" id="details-pobox-{{ctrl.index}}" name="address" ng-model="ctrl.data.value[0]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()"  value="" />
 </div>
 <div>
-	<label for="details-address">{{ctrl.t.address}}</label>
-	<input type="text" id="details-address" name="address" ng-model="ctrl.data.value[2]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value=""
+	<label for="details-address-{{ctrl.index}}">{{ctrl.t.address}}</label>
+	<input type="text" id="details-address-{{ctrl.index}}" name="address" ng-model="ctrl.data.value[2]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value=""
 		   focus-expression="$parent.ctrl.focus === ctrl.name" />
 </div>
 <div>
-	<label for="details-postal-code">{{ctrl.t.postalCode}}</label>
-	<input type="text" id="details-postal-code" name="postal-code" ng-model="ctrl.data.value[5]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
+	<label for="details-postal-code-{{ctrl.index}}">{{ctrl.t.postalCode}}</label>
+	<input type="text" id="details-postal-code-{{ctrl.index}}" name="postal-code" ng-model="ctrl.data.value[5]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
 </div>
 <div>
-	<label for="details-city">{{ctrl.t.city}}</label>
-	<input type="text" id="details-city" name="city" ng-model="ctrl.data.value[3]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
+	<label for="details-city-{{ctrl.index}}">{{ctrl.t.city}}</label>
+	<input type="text" id="details-city-{{ctrl.index}}" name="city" ng-model="ctrl.data.value[3]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
 </div>
 <div>
-	<label for="details-state">{{ctrl.t.state}}</label>
-	<input type="text" id="details-state" name="state" ng-model="ctrl.data.value[4]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
+	<label for="details-state-{{ctrl.index}}">{{ctrl.t.state}}</label>
+	<input type="text" id="details-state-{{ctrl.index}}" name="state" ng-model="ctrl.data.value[4]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
 </div>
 <div>
-	<label for="details-country">{{ctrl.t.country}}</label>
-	<input type="text" id="details-country" name="state" ng-model="ctrl.data.value[6]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
+	<label for="details-country-{{ctrl.index}}">{{ctrl.t.country}}</label>
+	<input type="text" id="details-country-{{ctrl.index}}" name="state" ng-model="ctrl.data.value[6]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" />
 </div>
diff --git a/templates/detailItems/date.html b/templates/detailItems/date.html
index 1c49848b..4f6b05e0 100644
--- a/templates/detailItems/date.html
+++ b/templates/detailItems/date.html
@@ -1,5 +1,5 @@
-<label>{{ctrl.meta.readableName}}</label>
-<input type="text" name="{{ctrl.name}}"
+<label for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<input type="text" id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}"
 	   ng-model="ctrl.data.value" datepicker ng-model-options="{ debounce: 500 }"
 	   ng-change="ctrl.model.updateContact()" value=""
 	   focus-expression="$parent.ctrl.focus === ctrl.name"
diff --git a/templates/detailItems/groups.html b/templates/detailItems/groups.html
index ff776ce0..a698113a 100644
--- a/templates/detailItems/groups.html
+++ b/templates/detailItems/groups.html
@@ -1,5 +1,5 @@
-<label ng-if="ctrl.availableOptions.length === 0" for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label>
-<ui-select id="details-{{ctrl.name}}" multiple tagging tagging-label="{{ctrl.t.newGroup}}" ng-model="ctrl.data.value"
+<label ng-if="ctrl.availableOptions.length === 0" for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<ui-select id="details-{{ctrl.name}}-{{ctrl.index}}" multiple tagging tagging-label="{{ctrl.t.newGroup}}" ng-model="ctrl.data.value"
 		   on-remove="ctrl.model.updateContact()" on-select="ctrl.model.updateContact()"
 		   theme="select2" focus-expression="$parent.$parent.ctrl.focus === ctrl.name">
 	<ui-select-match placeholder="{{ctrl.meta.readableName}}">{{$item}}</ui-select-match>
diff --git a/templates/detailItems/hidden.html b/templates/detailItems/hidden.html
index 049f80ac..258e1e1a 100644
--- a/templates/detailItems/hidden.html
+++ b/templates/detailItems/hidden.html
@@ -1 +1 @@
-<input type="hidden" id="details-{{ctrl.name}}" name="{{ctrl.name}}" ng-model="ctrl.data.value" value="" />
+<input type="hidden" id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}" ng-model="ctrl.data.value" value="" />
diff --git a/templates/detailItems/n.html b/templates/detailItems/n.html
index 16d1dc53..21615e60 100644
--- a/templates/detailItems/n.html
+++ b/templates/detailItems/n.html
@@ -1,27 +1,27 @@
-<label ng-if="ctrl.availableOptions.length === 0" for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label>
+<label ng-if="ctrl.availableOptions.length === 0">{{ctrl.meta.readableName}}</label>
 <button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
 <div>
-	<label for="details-honorificPrefix">{{ctrl.t.honorificPrefix}}</label>
-	<input type="text" id="details-honorificPrefix" name="honorificPrefix" ng-model="ctrl.data.value[3]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()" 
+	<label for="details-honorificPrefix-{{ctrl.index}}">{{ctrl.t.honorificPrefix}}</label>
+	<input type="text" id="details-honorificPrefix-{{ctrl.index}}" name="honorificPrefix" ng-model="ctrl.data.value[3]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()"
 		   autocomplete="off" autocorrect="off" spellcheck="false" value="" />
 </div>
 <div>
-	<label for="details-firstName">{{ctrl.t.firstName}}</label>
-	<input type="text" id="details-firstName" name="firstName" ng-model="ctrl.data.value[1]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()" 
+	<label for="details-firstName-{{ctrl.index}}">{{ctrl.t.firstName}}</label>
+	<input type="text" id="details-firstName-{{ctrl.index}}" name="firstName" ng-model="ctrl.data.value[1]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()"
 		   autocomplete="off" autocorrect="off" spellcheck="false"  value="" />
 </div>
 <div>
-	<label for="details-additionalNames">{{ctrl.t.additionalNames}}</label>
-	<input type="text" id="details-additionalNames" name="additionalNames" ng-model="ctrl.data.value[2]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()" 
+	<label for="details-additionalNames-{{ctrl.index}}">{{ctrl.t.additionalNames}}</label>
+	<input type="text" id="details-additionalNames-{{ctrl.index}}" name="additionalNames" ng-model="ctrl.data.value[2]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()"
 		   autocomplete="off" autocorrect="off" spellcheck="false"  value="" />
 </div>
 <div>
-	<label for="details-familyName">{{ctrl.t.familyName}}</label>
-	<input type="text" id="details-familyName" name="familyName" ng-model="ctrl.data.value[0]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()" 
+	<label for="details-familyName-{{ctrl.index}}">{{ctrl.t.familyName}}</label>
+	<input type="text" id="details-familyName-{{ctrl.index}}" name="familyName" ng-model="ctrl.data.value[0]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()"
 		   autocomplete="off" autocorrect="off" spellcheck="false"  value="" />
 </div>
 <div>
-	<label for="details-honorificSuffix">{{ctrl.t.honorificSuffix}}</label>
-	<input type="text" id="details-honorificSuffix" name="honorificSuffix" ng-model="ctrl.data.value[4]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()" 
+	<label for="details-honorificSuffix-{{ctrl.index}}">{{ctrl.t.honorificSuffix}}</label>
+	<input type="text" id="details-honorificSuffix-{{ctrl.index}}" name="honorificSuffix" ng-model="ctrl.data.value[4]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.updateDetailedName()"
 		   autocomplete="off" autocorrect="off" spellcheck="false"  value="" />
 </div>
diff --git a/templates/detailItems/tel.html b/templates/detailItems/tel.html
index 1c5865cd..fa886f38 100644
--- a/templates/detailItems/tel.html
+++ b/templates/detailItems/tel.html
@@ -1,7 +1,7 @@
 <select ng-model="ctrl.type" ng-model-options="{ debounce: 500 }" ng-change="ctrl.changeType(ctrl.type)">
     <option ng-repeat="option in ctrl.availableOptions" value="{{option.id}}">{{option.name}}</option>
 </select>
-<input type="tel" id="details-{{ctrl.name}}" name="phone"
+<input type="tel" id="details-{{ctrl.name}}-{{ctrl.index}}" name="phone"
        ng-model="ctrl.data.value" tel-model ng-model-options="{ debounce: 500 }"
        ng-change="ctrl.model.updateContact()" value=""
        placeholder="{{ctrl.meta.readableName}}"
diff --git a/templates/detailItems/text.html b/templates/detailItems/text.html
index c3295170..b55bee68 100644
--- a/templates/detailItems/text.html
+++ b/templates/detailItems/text.html
@@ -1,8 +1,8 @@
 <select ng-if="ctrl.availableOptions.length > 0" ng-model="ctrl.type" ng-model-options="{ debounce: 500 }" ng-change="ctrl.changeType(ctrl.type)">
 	<option ng-repeat="option in ctrl.availableOptions" value="{{option.id}}">{{option.name}}</option>
 </select>
-<label ng-if="ctrl.availableOptions.length === 0" for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label>
-<input type="text" id="details-{{ctrl.name}}" name="{{ctrl.name}}"
+<label ng-if="ctrl.availableOptions.length === 0" for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<input type="text" id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}"
 	   ng-model="ctrl.data.value" ng-model-options="{ debounce: 500 }"
 	   ng-change="ctrl.model.updateContact()" value=""
 	   placeholder="{{ctrl.meta.readableName}}"
diff --git a/templates/detailItems/textarea.html b/templates/detailItems/textarea.html
index 0487e67f..79631980 100644
--- a/templates/detailItems/textarea.html
+++ b/templates/detailItems/textarea.html
@@ -1,5 +1,5 @@
-<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label>
-<textarea id="details-{{ctrl.name}}" name="{{ctrl.name}}"
+<label for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<textarea id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}"
 	ng-model="ctrl.data.value" rows="3" cols="40"
 	ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()"
 	placeholder="{{ctrl.meta.readableName}}"
diff --git a/templates/detailItems/url.html b/templates/detailItems/url.html
index e0ff862c..4d8e783a 100644
--- a/templates/detailItems/url.html
+++ b/templates/detailItems/url.html
@@ -1,5 +1,5 @@
-<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label>
-<input type="url" id="details-{{ctrl.name}}" name="{{ctrl.name}}"
+<label for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<input type="url" id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}"
 	   ng-model="ctrl.data.value" ng-model-options="{ debounce: 500, allowInvalid: true }"
 	   ng-change="ctrl.model.updateContact()" value=""
 	   placeholder="https://…"