fix labels in detail items

This commit is contained in:
Hendrik Leppelsack 2017-02-09 22:28:47 +01:00
parent c0d8ca587b
commit a064294a11
10 changed files with 38 additions and 36 deletions

View File

@ -7,7 +7,8 @@ angular.module('contactsApp')
bindToController: {
name: '=',
data: '=',
model: '='
model: '=',
index: '='
},
link: function(scope, element, attrs, ctrl) {
ctrl.getTemplate().then(function(html) {

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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="" />

View File

@ -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>

View File

@ -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}}"

View File

@ -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}}"

View File

@ -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}}"

View File

@ -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://…"