0

I have a requirement where I need to find an element in the dom which is mapped to a particular model property. I need to search the dom and use the model property name.

<input type="text" ng-model="vm.MyProperty" />

Now I would like to know how can I select the above element from dom if I know that I am looking for an element that is bound to the DOM using the property name 'vm.MyProperty'.

Some more clarification:

My initial form is rendered using angularjs and bound to a viewmodel/model the model looks like this

{
  Name: "something",
  Age: 45,
  Address: {
    Street: "123 somestreet",
    Postcode: "ABC123",
    Suburb: "Sometown"
  }
}

My client after rendering the form shall call off to a config API which returns me this JSON object

{ Age: "readonly", "Address.Suburb": "hidden" }

I need the config object to contain any number of key value pairs, iterate through it and then find the corresponding dom field that is bound to they model property represented by the key, and apply either ng-readonly or ng-hidden to it accordingly.

I was looking for a way of how to find each dom element using the keys in teh config object.

Hope i am clear? Is there a smart way of relating the 2 model objects using a common key rather than plain strings? }

Simon Kirk
  • 5
  • 4
  • 2
    It's a bit unclear what you're asking, but if you're asking what I think, it's as simple as `document.querySelector('[ng-model="vm.MyProperty"]')`... – Heretic Monkey Feb 01 '17 at 23:49
  • 1
    Possible duplicate of [Find an element in DOM based on an attribute value](http://stackoverflow.com/questions/2694640/find-an-element-in-dom-based-on-an-attribute-value) – Heretic Monkey Feb 01 '17 at 23:52
  • Yes, this is sort of what i am looking for. Is there any other elegant way though. – Simon Kirk Feb 02 '17 at 00:01
  • @SimonKirk how you would define *"elegant"*? – Phil Feb 02 '17 at 00:01
  • My scenario is this. I initially render a form which is normal, with all fields editable. Then I call off to an API which returns me a model object representing a customer profile. Something like { "field1": "readOnly", "field2": 'hidden" }. I now need to go through my exising form, find which element was bound to field1, and either make it readonly or make it disabled. – Simon Kirk Feb 02 '17 at 00:04
  • Phil, i mean completely dynamic - let me edit my question to be more clearn – Simon Kirk Feb 02 '17 at 00:11
  • 2
    thinking is all backwards.... in angular you let the data model drive the view and you don't worry about finding dom elements yourself – charlietfl Feb 02 '17 at 00:43

1 Answers1

0

Assuming you call the API via $http (or similar), why don't you just use Angular to control the appropriate attributes?

For example, assign the object returned from the API to a scoped property and...

<input ng-model="vm.Age"
       ng-readonly="vm.dataObj.Age == 'readonly'"
       ng-hide="vm.dataObj.Age == 'hidden'"
       ...>

<input ng-model="vm.Address.Suburb"
       ng-readonly="vm.dataObj['Address.Suburb'] == 'readonly'"
       ng-hide="vm.dataObj['Address.Suburb'] == 'hidden'"
       ...>
Phil
  • 157,677
  • 23
  • 242
  • 245
  • Yup that work, i was hoping there is a way to put in a directive on all the elements. I don't have to put an of the vm.dataObj.Age == 'readonly' stuff in tehre. – Simon Kirk Feb 02 '17 at 00:53
  • the directive is smart enough to know the model is bound to know which model property it is bound to, and uses that string to then lookup the metadata object for hidden and readonly and then apply it – Simon Kirk Feb 02 '17 at 00:54
  • 1
    What I don't know is how in angular i can go, tell me Mr element which model property you are bound to at runtime – Simon Kirk Feb 02 '17 at 00:55