My goal is to display a list of users in a store. Everything works perfectly when using the user model specified below.
// Model
store : { type: Array },
The next step involves radio buttons for each individual store.
<!-- Button for 'all' users -->
<label class="btn-l33t" ng-model="radio.model" btn-radio="allstores">
{{global.user.company || 'null'}}
</label>
<!-- Button that filters users by store. Everything working as expected -->
<ul>
<li ng-repeat="store in global.user.store">
<label class="btn-l33t" ng-model="radio.model" btn-radio="store">
{{store}}
</label>
</li>
</ul>
Finally, there's the table displaying all users.
<!-- Display user if store is included in user.store -->
<!-- Everything functioning correctly -->
<tr ng-show="user.store.indexOf(radio.model) != -1 || radio.model === allstores" data-ng-repeat="user in users">
I have now updated my model to include objects within the stores array, allowing for sections within each store.
store: {
type: Array,
thing: {
name: String,
section: Array,
}
},
While the list of users is displaying correctly, the table is no longer filtering. Clicking on a radio button does not trigger any changes. I've updated the radio buttons to display both the store name and section accurately.
<label class="btn-l33t" ng-model="radio.model" btn-radio="allstores">
{{global.user.company || 'null'}}
</label>
<ul>
<li ng-repeat="store in global.user.store">
<label class="btn-l33t" ng-model="radio.model" btn-radio="store">
{{store.name}} <!-- changed {{store}} to {{store.name}} -->
<!-- The property is store.name instead of store.thing.name -->
</label>
<!-- Sections added successfully -->
<ul>
<li ng-repeat="section in store.section" >
<label class="btn-l33t" ng-model="radio.model2" btn-radio="section">
{{section}}
</label>
</li>
</ul>
</li>
</ul>
The challenge arises when trying to display the users in the table. Unsure about the necessary adjustments to make it work.
<tr ng-show="user.store.thing.name.indexOf(radio.model.name) != -1 || radio.model === null" data-ng-repeat="user in users">
Edit/Update: Here's how stores are being added:
var obj ={
name: $scope.datStore.name,
section: ["grocery","utensils"]
}
user3[0].store.push(obj);
Perhaps this explains why stores.name is functional while stores.thing.name isn't. Shouldn't the model be updated accordingly? Surprisingly, the current model accepts this arrangement.