angular ngmodel - Find field by its angularjs model -

angular ngmodel - Find field by its angularjs model -

can somehow find field corresponding given angularjs model? know, there may multiple fields corresponding single variable, or none, not problem.

for example, there's input ng-model=users[2].name, want method taking string "users[2].name" , returning dom element.

i needn't fast, want sort of demo of user input, e.g., if user should fill name field, move (mouse simulating) overlay , fill programmatically. si

i can via jquery, rather cumbersome, it's hardly ever straightforward selectorinput[ng-model="user[0].name"]. it's typically buried in ng-repeat="user in users" , several levels deep. or worse, in mixture of ng-repeat-start , ng-repeat-end.

a solution changing users[2].name , finding changed dom elements alright, too.

i created plunk showing wanted.

i'm adding reply because works, unlike original answer. much different approach didn't want tack on one.

caveat: this works if ng-model look has dot, otherwise prototypical inheritance chain doesn't exist propagate temporary change.

>>the plunk overview

first, decorate ng-model directive in order track ng-models in app. these models stored in mymodels array. loop through mymodels looking models evaluate value we're looking , force them possiblematches array. finally, alter target value , loop through possiblematches determine 1 changed.

the code: angular.module('find_by_model', []) .constant('mymodels', []) .config(function($provide, mymodels) { window.mymodels = mymodels; // debugging $provide.decorator('ngmodeldirective', function($delegate) { var directive = $delegate[0]; var compile = directive.compile; directive.compile = function(telement, tattrs) { var link = compile.apply(this, arguments); telement.append('<div>added in decorator</div>'); homecoming function(scope, elem, attrs) { link.apply(this, arguments); v = scope.$eval(tattrs.ngmodel); mymodels.push({scope: scope, elem:elem, val: function() { homecoming scope.$eval(tattrs.ngmodel); }, }); }; }; homecoming $delegate; }); }) .factory('finder', function (mymodels) { function findelem($scope, path) { var originalval = $scope.$eval(path), possiblematches = [], result = null; angular.foreach(mymodels, function (model) { if (angular.equals(model.val(), originalval)) possiblematches.push(model); }); // temp change: blah property arbitrary seek { var newval = $scope.$eval(path + " = " + json.stringify({ val: path, blah: 'changed'}) ); } catch(e) { homecoming null; } // find it: note: made more efficient breaking loop angular.foreach(possiblematches, function (model) { if (angular.equals(model.val(),newval)) result = model; }); // reset $scope.$eval(path + " = " + json.stringify(originalval)); homecoming result && result.elem; } homecoming { findelem: findelem } }) and here how utilize (assuming you've injected finder): $scope.expressiontofind = "m.top[0].name"; var el = finder.findelem($scope, $scope.expressiontofind); if (el) angular.element(el).css('outline', '1px solid red'); else alert('not found');

angularjs angular-ngmodel