AngularJS - Обращение к $ scope name / ng-model, имеющему '.' в этом - PullRequest
Новая
       15

AngularJS - Обращение к $ scope name / ng-model, имеющему '.' в этом

0 голосов
/ 01 мая 2020

У меня проблемы с использованием ng-модели в функции фильтра. Вход в настоящее время называется «search.anything». Я не могу изменить имя, так как оно повлияет на другие фильтры.

Я хочу использовать его в качестве параметра в функции фильтра. Есть ли другой способ ввода значения? $ scope.search.anything определенно не так. 

$scope.myFilter = function(course) {
  var isMatch = false;

  if ($scope.search.anything) {
    var parts = $scope.search.anything.split(' ');

    parts.forEach(function(part) {
      if (new RegExp(part).test(course.keywords)) {
        isMatch = true;
      }
    });
  } else {
    isMatch = true;
  }

  return isMatch;
};

Любая помощь будет оценена.

Демо: 

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  $scope.message = "Hello World!";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
  <div ng-controller="AppCtrl">
    <h1>Message: {{message}}</h1>
  </div>
</section>

1 Ответ

0 голосов
/ 01 мая 2020

Вы можете использовать md-input-container ( ref ) для ввода значения фильтра (здесь я использую input, но вы можете использовать md-select или любой другой метод ввода. В ng-repeat вы можете использовать пользовательский фильтр (filter: functionFilter, ref ).

Для обработки "." Внутри имени свойства вы можете сохранить его в переменной ctrl.searchKey = "search.anything"; и любой когда вы хотите получить к нему доступ в JS ctrl[ctrl.searchKey] = "value1"; и в HTML, вы также можете использовать строковый литерал "ctrl['search.anything']".

Если вы измените «Значение фильтра» на «значение2» или «значение3» "это отфильтрует ng-repeat.

Вот пример фрагмента кода. Надеюсь, это поможет. 

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  const ctrl = this;
  ctrl.data = [{
    value: "value1"
  }, {
    value: "value2"
  }, {
    value: "value3"
  }];
  ctrl.searchKey = "search.anything";
  ctrl[ctrl.searchKey] = "value1";
  ctrl.myFilter = input => input.value === ctrl[ctrl.searchKey];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
  <div ng-controller="AppCtrl as ctrl">
    <md-input-container>
      <label>Filter value</label>
      <input ng-model="ctrl['search.anything']">
    </md-input-container>
    <div ng-repeat="entity in ctrl.data | filter: ctrl.myFilter"> Value filtered {{ entity.value }}</div>
  </div>
</section>
...