1
Answer

Set a property on an Angular model from the controller

Steve Voltmer

Steve Voltmer
6y
560
1
I have some JSON that has two arrays of objects, one for "articles" and one for "allCategories". My controller is getting the data and assigning the two arrays to their own $scope as seen here:
  1. $http.get(jsonFeed).success(function(response){    
  2. // JSON Data    
  3. $scope.articles = response.articles;    
  4. $scope.allCategories = response.allCategories;   
Then I iterate over the allCategories array to populate my select in the view:
  1. <div ng-app="newsArticleListing" ng-controller="articleListing">      
  2. <!--<p>PATH: {{ path }} URL: {{ url }} SEARCH: {{ urlQuery }} LOCATIONOJB: {{ locationObj }}</p> -->      
  3.     <form class="filter-form" method="get" name="Search" target="_top">      
  4.         <div class="filter-form-holder">      
  5.             <div class="filter-form-item">      
  6.                 <span class="filter-form-label">Search by:</span>      
  7.             </div>      
  8.             <div class="filter-form-item">      
  9.                 <div class="filter-form-select-wrapper">      
  10.                     <select class="directorySelect angularFilter"      
  11.                         ng-model="catSelect"      
  12.                         ng-options="cat.name for cat in allCategories | orderBy: 'name'"      
  13.                         ng-change="changeHandler()"      
  14.                         style="height:59px; width:385px; border-radius:0px;" >      
  15.                        <option value=''> All News</option>      
  16.                     </select>      
  17.                 </div>      
  18.             </div>      
  19.                 <input style="border-radius: 5px;" class="text-search" ng-model="courseTextSearch" type="text" name="search" placeholder="Search all listings"/>      
  20.         </div>       
  21. </form>  
Then I iterate over the "articles" array and filter based off of the "catSelect" model, which is an object that contains { "name" : "somevalue", "filterValue" : "somevalue"} I am using "catSelect.filterValue"
  1. <div class="container">    
  2.         <ul class="news-list">    
  3.         <li class="news-list-item" dir-paginate="article in articles | orderBy: '-date' | filter : { categories : catSelect.filterValue || undefined } | filter: courseTextSearch | itemsPerPage:pageSize" current-page="pagination.current">    
  4.         <article class="news-block" >    
  5.             <div ng-show="catChecker(catSelect.filterValue, article.categories)" class="news-block-holder is-blue">    
  6.             <strong class="news-block-taxonomy">{{ catSelect.name }}</strong>    
  7.             </div>    
  8.                 <a class="news-block-img-link" href="{{ article.link }}" target="_blank">    
  9.                     <div class="news-block-img" style="background-image: url('{{ article.thumbImage }}'); background-size: cover;">    
  10.                         <img ng-src="{{ article.thumbImage }}" alt="{{ article.alt }}" />    
  11.                     </div>    
  12.                 </a>    
  13.             <div class="news-block-body">     
  14.                 <a class="news-block-link" ng-show="article.title" href="{{ article.link }}" target="_blank">{{ article.title }}</a>    
  15.            </div>         
  16.         </article>    
  17.         </li>    
  18.         </ul>    
  19.     </div>    
  20.     <!-- Paging -->    
  21.     <div class="pagePagination">    
  22.         <dir-pagination-controls max-size="8" direction-links="true">    
  23.         </dir-pagination-controls>    
  24.     </div>  
Everything works fine, accept when I try to add in the ability to set the selected value from a query string. I can't assign the property "catSelect.filterValue" from within my controller as below: (fyi.. I have predefined some links currently that are in the structure "?
  1. year=someyear&topics=sometopic")  
  2.    
  3. if(window.location.href.includes('?'))    
  4. {    
  5.     var queryString = window.location.href.split('?');    
  6.     var values = queryString[1].split('&');    
  7.     var topics = values[1].split('=');    
  8.     var topic = topics[1];    
  9.     console.log(topic);    
  10.     if(topics[0] == "topics"){   
  11.         $scope.catSelect.filterValue = topics[1];    
  12.         console.log($scope.catSelect.filterValue);    
  13.     }    
  14. }  
I thought because the model "catSelect" was two-way bound to the view I would have access to set the property of "$scope.catSelect.filterValue". What am I missing?
Answers (1)
Next Recommended Forum