AngularJS - directive to get the value in an object

Question

I am currently using this for loop to get the parent

angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); 

Please suggest a general directive that will return category . Here, queryTicketCategories is an array object. And I want to assign an array of $scope.parent , which is equal to $scope.ticketCategory.parentId

HTML code

  <input type="text" ng-model="parent" placeholder="{{'PARENT_CATEGORY' | translate}}" typeahead="category as category.name for category in getTicketCategories($viewValue)" typeahead-loading="loading" class="form-control"> 

Answer 1

For your case, it is better to study the typeahead directive and make the most of it.

http://angular-ui.imtqy.com/bootstrap/#/typeahead

Instead of creating your own directive or service, you can use the existing directive with a callback, typeahead-on-select

 typeahead-on-select($item, $model, $label) (Defaults: null) : A callback executed when a match is selected 

This is an example that I created without using a callback. It allows you to select the google address from what you type.

Without typeahead-on-select :
http://plnkr.co/edit/GMnzod9MQZWxsKSuJUJu?p=preview

The following goes further, changing the selected address to uppercase. You can do whatever you want in this callback.

http://plnkr.co/edit/jaeSZdSKucMQgIF05KwD?p=preview

I used this function to change the selected address in uppercase.

 $scope.myFunc = function($item, $model, $label) { $scope.asyncSelected = $item.toUpperCase(); } 

In your case, you can do the following:

 $scope.myFunc = function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } } 

HTML

 typeahead-on-select="myFunc($item)" 

So, your use case and data may differ from the example I used above, but the basic approach is the same. After selecting an item, there is a callback, and you can more control your data control with the typeahead-on-select callback.

Answer 2

If I understand correctly, you want to set the $scope.parent object that appears in the text box based on $scope.ticketCategory.parentId

If so, then directive is not the best way to do this. The directive is designed to manipulate the DOM or logic that affects your opinion. But this function has nothing to do with updating the view. It just happens that the view is attached to $scope.parent , but if you just install this object in the code, the view will automatically update (or maybe with a call to $apply() )

In this case, you must create a service or filter to make this operation reusable (also be sure to return as soon as a match is found, since there is no need to continue the cycle after that, right?)

However , if you insist on using the directive. You can create a directive that depends on the ng model and set the model value based on other attributes (list of categories, selected identifier). So the usage will be like that, perhaps

 <input type="text" ng-model="parent" set-model="ticketCategory.parentId" set-model-list="queryTicketCategories" > 

and the directive code will basically find the object from queryTicketCategories , which has the same identifier as ticketCategory.parentId , and set the model with this object.

You should probably set a flag or so in the directive to run this code only once, and not every $apply() loop. But with the service / filter approach, you can set the parent value whenever you want (perhaps after a server request or in a callback), so I recommend that you use this instead of the directive.

Answer 3

 angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); 

From your queryTicketCategories code there should be an array of objects. Since you cannot loop an object. So try using

 angular.forEach(queryTicketCategories, function(category) { if(angular.equals(parseInt(category.id), parseInt($scope.ticketCategory.parentId)) { $scope.parent = category; return; } }); 

Here, make sure queryTicketCategories is in the format

 [ { ... } , { ... } , { ... } ] 

to make category.id work, and we use parseInt, as there may be a chance that category.id or $ scope.ticketCategory. parentId can be in String.

Note that '===' and angular.equals () have the same implementation.

Answer 4

You can watch the expression on $ scope.ticketCategory.parentId. After the value for the parameter $ scope.ticketCategory.parentId is changed, update $ scope.parent to the category with the same identifier. You can create a filter to search.

Example -

 app.filter('getById', function() { return function(queryTicketCategories, id) { var i=0, len=queryTicketCategories.length; for (; i<len; i++) { if (queryTicketCategories[i].id == +id) { return queryTicketCategories[i]; } } return null; } }); $scope.$watch('ticketCategory.parentId', function() { // do something here var found = $filter('getById')(queryTicketCategories, ticketCategory.parentId); console.log(found); $scope.parent = found; }, true); 

Answer 5

I'm not sure what you want, you need to update your answer and provide an example with what you want: I have A, I pass B, I expect C.

In any case, this is a simple directive that implements the logic of the code in your question. And here is the jsfiddle .

 var app = angular.module('HelloApp', []) app.controller('MyController', function MyController($scope) { $scope.myCategoryId = 11; $scope.myParentCategory; $scope.myCategories = [{ "id": 1, "name": "Tara" }, { "id": 11, "name": "Opal" }, { "id": 21, "name": "Whitfield" }, { "id": 31, "name": "Alta" }, { "id": 41, "name": "Tucker" }, { "id": 51, "name": "Sims" }, { "id": 61, "name": "Bradshaw" }]; }); app.directive('parentCategory', function() { return { restrict: "AE", scope: { categories: "=", categoryId: "=", parent: "=" }, link: function(scope, iElement, iAttrs, controller, transcludeFn) { scope.$watch('categoryId', findParent); function findParent() { var parent; angular.forEach(scope.categories, function(category) { if (category.id === scope.categoryId) parent = category; }); scope.parent = parent; } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="HelloApp"> <div ng-controller="MyController"> <label for="">CategoryId:</label> <input type="number" ng-model="myCategoryId"> <h3>Parent</h3> <pre>{{myParentCategory|json}}</pre> <parent-category categories="myCategories" category-id="myCategoryId" parent="myParentCategory"></parent-category> </div> </div> <!-- or you can use it like this, as an attribute <input type="number" ng-model="myCategoryId" parent-category categories="myCategories" category-id="myCategoryId" parent="myParentCategory"> -->