CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-bootstrap
Andy Nguyen
Andy Nguyen

Reputation: 461

When I change my $scope.model through select within a ui-tabset it doesn't change accordingly

Currently I have my <select> inside of a ui-tabset and when it is inside of a tabset it does not seem to update my $scope.filter_item_package correctly when I have it set as the model.

Here is my code: HTML:

<uib-tab index="2" heading="All Harvest Plans">
  <select class="form-control"  ng-model='filter_item_package' ng-change='package_change()' >
   <option ng-repeat=" items in cases_filter_items" ng-selected="{{items.t2}}" value="{{items.t2}}">{{items.t3}}
   </option>
  </select>
</uib-tab>

JS:

$scope.filter_item_package = 'Cases'
 $scope.cases_filter_items = [
{'id':1,'t2':'Cases','t3':'Show Cases'},
{'id':2,'t2':'Acres','t3':'Show Acres'},
{'id':2,'t2':'Palettes','t3':'Show Pallettes'}
]
$scope.package_change = function(){console.log($scope.filter_item_package)}

But when I don't have the options nested inside the ui-tabs it updates correctly. For example, when I change to Acres or Palettes it will console.log accordingly. This is just a rough draft of what is going on.

Upvotes: 0

Views: 26

Answers (1)

user11390576
user11390576

Reputation:

I can see at least one problem with your draft.

When you write ng-selected="{{items.t2}}", you are saying:

if items.t2 returns true, then set this element's selected attribute.

And because items.t2 returns a string, which is 'truthy' in Javascript, you are setting all of your ng-repeat instances to be selected by default.

Instead, use ng-selected="items.t2 === filter_item_package". Note that {{}} is not required for ng-* directives.

Upvotes: 1

Related Questions