Вопрос по html, javascript, html5 – AngularJS - Атрибут значения в текстовом поле ввода игнорируется, когда используется модель ng?

213

Использование AngularJS, если я установил значение простого текстового поля на что-то вроде & quot; bob & quot; ниже. Значение не отображается, еслиng-model атрибут добавлен.

    <input type="text"
           id="rootFolder"
           ng-model="rootFolders"
           disabled="disabled"
           value="Bob"
           size="40"/>

Кто-нибудь знает простой способ обойти этот ввод по умолчанию и сохранитьng-model? Я пытался использоватьng-bind со значением по умолчанию, но это тоже не работает.

Ваш Ответ

10   ответов
216

вы должны определить модель в контроллере, а не в представлении.

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}
Благодарю. Но в этом случае модель устанавливается в контроллере. И в документах Angular они всегда одни и те же, данные задаются в контроллере. Но мой контроллер находится в файле JS. Как это сделать при редактировании & quot; форма? Как передать данные формы по умолчанию в контроллер "угловым путем"?
Это не работает для меня, однако добавление дополнительного атрибута ng-init, показанного Марком Райкоком (ng-init = "rootFolders =" Bob ""), работает нормально.
И как мне установить значение по умолчанию, если у меня есть поле ввода, например: & lt; input type = & quot; number & quot; нг-модель = & Quot; newTransaction [$ индекс] [user.email] & Quot; / & GT; ?
182

но если вам действительно нужно сделать эту работу, @urbanek недавно опубликовал обходной путь, используя ng-init:

<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">

https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ

Вам может не понадобиться «значение =» Боб ». часть.
+1, но, как упоминалось в одном из постов в связанном обсуждении, этого следует избегать (поскольку логически это менее правильно и затрудняет тестирование).
Очень ценю ответ Марка, поскольку он решил мою проблему. Я подтверждаю, что нам не нужноvalue="Bob" часть во входном теге.
@JZ., Здесьfiddle
Этот метод работает хорошо, если вы используете значение модели также на v1.2. & lt; ... ng-init = & quot; rootFolders = someModelAttribute & quot; ... & gt;
0

Здесь вы можете инициализировать ng-модель текстового поля двумя способами

- With use of ng-init

- With use of $scope in js

<!doctype html>
 <html >
 <head>
        <title>Angular js initalize with ng-init and scope</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
    <h3>Initialize value with ng-init</h3>
    <!-- Initlialize model values with ng-init -->
    <div ng-init="user={fullname:'Bhaskar Bhatt',email:'[email protected]',address:'Ahmedabad'};">
        Name : <input type="text" ng-model="user.fullname" /><br/>
        Email : <input type="text" ng-model="user.email" /><br/>
        Address:<input type="text" ng-model="user.address" /><br/>

    </div>  
    <!-- initialize with js controller scope -->
    <h3>Initialize with js controller</h3>

    <div  ng-controller="alpha">
        Age:<input type="text" name="age" ng-model="user.age" /><br/>
        Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
        Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
    </div>  

</body> 
<script type="text/javascript">
        angular.module("app",[])
        .controller("alpha",function($scope){
            $scope.user={};
            $scope.user.age=27;
            $scope.user.exp="4+ years";
            $scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
        });

     </script>
 </html>                
0

У меня была похожая проблема. Я не смог использоватьvalue="something" для отображения и редактирования. Я должен был использовать приведенную ниже команду внутри моего<input>по заявленной модели.

[(ngModel)]=userDataToPass.pinCode

Где у меня есть список данных в объектеuserDataToPass и элемент, который мне нужно отобразить и отредактироватьpinCode.

Для того же, я упоминалэто видео на YouTube

7

помните, что значениеvalue атрибутdoes not bind on ngModel field. Вы должны инициировать это самостоятельно, и лучший способ сделать это

<input type="text"
       id="rootFolder"
       ng-init="rootFolders = 'Bob'"
       ng-model="rootFolders"
       disabled="disabled"
       value="Bob"
       size="40"/>
Чувствует себя странно, чтобы инициировать его в директиве / разметке вместо контроллера.
5

Нет необходимости в $ parse

angular.directive('input', [function () {
  'use strict';

  var directiveDefinitionObject = {
    restrict: 'E',
    require: '?ngModel',
    link: function postLink(scope, iElement, iAttrs, ngModelController) {
      if (iAttrs.value && ngModelController) {
        ngModelController.$setViewValue(iAttrs.value);
      }
    }
  };

  return directiveDefinitionObject;
}]);
имейте в виду, что ngModelController. $ setViewValue изменит состояние модели на грязное и нетронутое на ложное, что также повлияет на состояние формы, что может иногда вызывать боль.
0

что вы должны установить ng-модель для родительского элемента, где вы хотите установить ng-значение / значение. Как упомянуто Angular:

It is mainly used on input[radio] and option elements, so that when the element is selected, the ngModel of that element (or its select parent element) is set to the bound value.

Например: это исполняемый код:

<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
  <input name="radioClick" type="radio"  ng-click="vm.setPeerGrp('market');" 
         ng-value="vm.settingsObj.MarketPeers" 
         style="position:absolute;margin-left: 9px;">
  <div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>

Примечание. В приведенном выше случае у меня уже был ответ JSON на ng-модель и значение, я просто добавляю другое свойство к объекту JS как "MarketPeers". Таким образом, модель и значение могут зависеть от потребности, но я думаю, что этот процесс поможет иметь и модель ng, и значение, но не иметь их на одном элементе.

66

похоже, делает свою работу. Я сделал небольшие изменения вДэн Хансакеркод:

Added a check for ngModel before trying to use $parse().assign() on fields without a ngModel attributes. Corrected the assign() function param order.
app.directive('input', function ($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});
Я не вижу причин, чтобы этот ответ не был одобрен
Это не только умное, но и лучшее решение. В моем случае я не могу установить значение по умолчанию для ng-модели на контроллере, потому что это форма PHP, если проверка на стороне сервера завершится неудачно, форма обновится и все, что находится в ng-модели, будет потеряно при удалении входного значения тоже.
Да! Люблю это решение!
Это кажется лучшим решением, если вы также хотите, чтобы базовая версия HTML-формы работала без JavaScript.
Это лучший ответ, который я нашел! ... элегантно решает мою проблему. Мне пришлось записать значение на скрытый ввод (токен формы Symfony, созданный на сервере).
7

Update: Мой первоначальный ответ заключался в том, чтобы контроллер содержал код, поддерживающий DOM, что нарушает соглашения Angular в пользу HTML. @dmackerman упомянул директивы в комментарии к моему ответу, и я до сих пор совершенно не замечал этого. С этим входом здесьright способ сделать это, не нарушая Angularor Соглашения HTML:

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

<div ng-controller="Main">
    <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>

а потом:

app.directive('input', ['$parse', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if(attrs.value) {
                $parse(attrs.ngModel).assign(scope, attrs.value);
            }
        }
    };
}]);

Конечно, вы можете изменить указанную выше директиву, чтобы сделать больше сvalue атрибут перед установкой модели на ее значение, включая использование$parse(attrs.value, scope) лечитьvalue атрибут как угловое выражение (хотя я, вероятно, лично для этого использую другой атрибут [custom], поэтому стандартные атрибуты HTML последовательно обрабатываются как константы).

Кроме того, есть похожий вопрос вСоздание данных на основе модели ng что также может представлять интерес.

Я явно упомянул этот недостаток в своем ответе. Выshouldn't, но тыcan, Все зависит от того, считаете ли вы более важным следовать соглашениям Angular или HTML. Потому что Angular ломает HTML.
Спасибо за директиву! Это дало мне идеи для применения в проекте, над которым я работаю, где я генерирую некоторую сторону контент-сервера, а затем должен использовать его как свою модель в клиенте.
Вы не должны делать какие-либо манипуляции / обнаружение DOM в своих контроллерах. Вместо этого следует использовать директиву.
Рад, что смог помочь. Конечно, вообще говоря, вы захотите создать свой контент на стороне сервера в виде JSON, и ваше приложение будет манипулировать моделью на основе этого, но иногда полезно иметь другие варианты, и это только один.
Ох яam манекен Полностью пропустил немного об использовании директивы. Ответ обновлен соответственно. Искренне извиняюсь за то, что был придурком, @dmackerman.
21
The Angular way

ение AJAX в шаблоне формы, а затем динамически заполнить его из модели. Модель не заполняется из формы по умолчанию, потому что модель является единственным источником правды. Вместо этого Angular пойдет другим путем и попытается заполнить форму из модели.

If however, you don't have time to start over from scratch

Если у вас написано приложение, это может повлечь за собой довольно серьезные архитектурные изменения. Если вы пытаетесь использовать Angular для улучшения существующей формы, а не для создания целого одностраничного приложения с нуля, вы можете извлечь значение из формы и сохранить его в области во время ссылки, используя директиву. Затем Angular свяжет значение в области обратно с формой и сохранит его в синхронизации.

Using a directive

Вы можете использовать относительно простую директиву, чтобы извлечь значение из формы и загрузить его в текущую область. Здесь я определил директиву initFromForm.

var myApp = angular.module("myApp", ['initFromForm']);

angular.module('initFromForm', [])
  .directive("initFromForm", function ($parse) {
    return {
      link: function (scope, element, attrs) {
        var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
        val = attrs.value;
        if (attrs.type === "number") {val = parseInt(val)}
        $parse(attr).assign(scope, val);
      }
    };
  });

Вы можете видеть, что я определил пару запасных вариантов, чтобы получить название модели. Вы можете использовать эту директиву в сочетании с директивой ngModel или связать с чем-то, кроме $ scope, если вы предпочитаете.

Используйте это так:

<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}

Обратите внимание, что это также будет работать с текстовыми областями и выбирать выпадающие списки.

<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}
Идеальный ответ, спасибо @superluminary
@smoksnes - вы абсолютно правы. Я обновил ответ :)
Здесь упакованный модуль, который реализует решение, аналогичное описанному здесь.github.com/platanus/angular-keep-values
Отличное решение, но оно будет работать только сinput="text", Если у тебя естьnumber это броситModel is not of type number docs.angularjs.org/error/ngModel/numfmt?p0=333
Для поддержки номеров вы можете добавитьif (attrs.type === "number") val = parseInt(val);

Похожие вопросы