TypeError：无法设置未定义的属性“

Question

For some reason, I can't seem to bring this variable into scope to be manipulated.

Markup:

<label>Description only <input ng-model="filter.Description"></label><br>
<label>Tags only <input ng-model="filter.Tags.Text"></label><br> //This methodology works

<div ng-repeat="t in filteredTags" style="display:inline-block">
    <button class="btn btn-warning" ng-click="FilterByTag(t.Text)">
        {{t.Text}}
    </button>
</div> //But I want these buttons to work for the same thing, and they don't

.....

<tr ng-repeat="b in filteredBookmarks| filter: filter:strict">

JavaScript:

 $scope.FilterByTag = function (tagName) {
        filter.Tags.Text = tagName;
    };

If I change the JS variable to $scope.filter.Tags.Text = tagName; I get an error that reads: TypeError: Cannot set property 'Text' of undefined . Has anybody run into something similar?

Answer 1

Try initializing your filter object first:

$scope.filter = {
    'Tags': {
        'Text': null
    },
    'Description': null
}

Answer 2

Your function should read:

$scope.FilterByTag = function (tagName) {
    $scope.filter.Tags.Text = tagName;
};

Your filter object is on the $scope

Answer 3

Of course it is because the hierarchy you are specifying for setting your tagName is not present. so it find the Tags itself is undefined and you are trying to set the Text value of it which is undefined and you got the error.

Try to specify a default data structure of your object where you want to store the value.

$scope.filter = {
  'Tags': {
      'Text': undefined
  },
  'Description': undefined
}