javascript - Conditionally showing options in a select with Angular -
i creating template showing select fields in app. have 4 different types of select field. value = id, value = name, value = static_id , value = static_name (it's complicated...).
i plan migrate these ngoptions if possible in future, attempting have single select template, handle 4 types of field.
i use ng-if show different 'static' code select, creates lot of code want reduce single template.
here's code:
// shows basic select field option value = id <div ng-if="field.type=='select'" class="form-group"> <select-field></select-field> </div> // shows basic select field option value = name <div ng-if="field.type=='select_name'" class="form-group"> <select-field></select-field> </div> // shows basic select field option value = static_id <div ng-if="field.type=='select_static_id'" class="form-group"> <select-field></select-field> </div> // shows basic select field option value = static_name <div ng-if="field.type=='select_static_name'" class="form-group"> <select-field></select-field> </div> here, field attributes identical, except generated options. hence why want template this.
i attempting have single template have ng-if inside detect field type, json reads, , change options displayed accordingly, (2 of 4 examples shown):
<select name={{field.name}} class="form-control form-field {{relationshipurl}}" id={{field.name}} data-is-autofocus={{field.focus}} data-selectreq={{field.rules.selectreq}} data-showhide={{field.rules.showhide}} > <option value="" selected>please select...</option> <span ng-if="field.type=='select'"> <option value={{option.id}} ng-repeat="option in cache[field.relationshipurl] | orderby:'name || firstname'" ng-selected="formdata[field.name] == option.id"> {{option.name || option.firstname}} </option> </span> <span ng-if="field.type=='select_static_name'"> <option value={{option.name}} ng-repeat="option in cache[field.relationshipurl] | orderby:'name'" ng-selected="formdata[field.name] == option.name"> {{option.name}} </option> </span> </select> possibly horrible code use span within select, that's why coming people. works in shows correct options, however, shows options listed out twice, , assume list them 4 times once option types included. hope makes sense. in advance.
well no sooner had posted, answer blindingly obvious. instead of above approach removing span , putting ng-if on <option> instead fixed issue , works perfectly!
<select name={{field.name}} class="form-control form-field {{relationshipurl}}" id={{field.name}} data-is-autofocus={{field.focus}} data-selectreq={{field.rules.selectreq}} data-showhide={{field.rules.showhide}} > <option value="" selected>please select...</option> <option ng-if="field.type=='select'" value={{option.id}} ng-repeat="option in cache[field.relationshipurl] | orderby:'name || firstname'" ng-selected="formdata[field.name] == option.id"> {{option.name || option.firstname}} </option> <option ng-if="field.type=='select_name'" value={{option.name}} ng-repeat="option in cache[field.relationshipurl] | orderby:'name'" ng-selected="formdata[field.name] == option.name" > {{option.name}} </option> <option ng-if="field.type=='select_static_id'" value={{option.id}} ng-repeat="option in cache[field.relationshipurl] | orderby:'name'" ng-selected="formdata[field.name] == option.id" > {{option.name}} </option> <option ng-if="field.type=='select_static_name'" value={{option.name}} ng-repeat="option in cache[field.relationshipurl] | orderby:'name'" ng-selected="formdata[field.name] == option.name"> {{option.name}} </option> </select> thank anyway @charlietfl quick response.
Comments
Post a Comment