ng-repeat не обновляет информацию после обновления $ scope

0

У меня есть ng-repeat который создает форму с некоторыми исходными данными. Затем пользователь может изменять указанные данные, и изменения должны появляться в форме. До этого пользовательские данные дезинфицируются другой функцией, которая вызывается с помощью ng-click.

Все работает хорошо под капотом (я проверил свой $scope.some_array, из которого ng-repeat берет данные, а новые данные находятся в нужном месте), но на странице ничего не происходит.

Элемент:

<li ng-repeat="field in some_array" id="field-{{$index}}">
            <div class="{{field.field_color}}">
                <button type="button" ng-click="save_field($index)">done</button>
                {{field.nice_name}}
            </div>
            <div id="field-input-{{$index}}">
                <input type="text" id="{{field.tag}}" value="{{field.content}}">
                <label  for="{{field.tag}}">{{field.nice_name}}</label>
            </div>
  </li>

Код save_field:

$scope.save_field = function (index) {
        console.log($scope.some_array[index]["content"])
        var value = $("#field-" + index).children("div").children("input").val()
        var name = $scope.some_array[index]["name"]
        var clean_value = my_clean(value)
        if (norm_value === "") {
            return
        }
        $scope.some_array[index]["content"] = clean_value
        console.log($scope.some_array[index]["content"])
    }

На консоли я вижу:

10.03.16
10/03/16

Что правильно, но в форме я вижу только 10.03.16. Я уже пробовал поместить $timeout(function(){$scope.$apply()}) в качестве последней строки моей функции, но вывод все тот же.

  • 0
    Избавьтесь от всего этого jQuery и используйте угловую методологию. Используйте ng-model для привязки данных к полям ввода
  • 0
    try $ scope. $ evalAsync (function () {$ scope.some_array [index] ["content"] = clean_value;});
Теги:
angularjs-ng-repeat

1 ответ

1
Лучший ответ

Вы не должны использовать такой ввод, если хотите привязать переменную к нему. Цикл дайджеста обновит значение, но оно не будет обновляться явно, потому что это не поведение html native.

Вместо этого используйте ng-model, он обновит значение представления ввода, как ожидалось:

<input type="text" id="{{field.tag}}" ng-model="field.content">

Кроме того, используя ng-модель, ваша переменная будет обновлена, когда пользователь изменит ввод, поэтому вы можете получить его, чтобы сделать несколько обработок намного легче в функции save_field без jQuery:

$scope.save_field = function (index) {
    if (norm_value === "") {
      return;
    }
    $scope.some_array[index]["content"] = my_clean($scope.some_array[index]["content"]);
};

Дополнительная информация: https://docs.angularjs.org/api/ng/directive/ngModel

Ещё вопросы

Сообщество Overcoder
Наверх
Меню