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

Использование 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)

Решение Вопроса

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

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


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

что вы должны установить 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, и значение, но не иметь их на одном элементе.

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

[(ngModel)]=userDataToPass.pinCode

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

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

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 что также может представлять интерес.

 12 мар. 2014 г., 12:26
Спасибо за директиву! Это дало мне идеи для применения в проекте, над которым я работаю, где я генерирую некоторую сторону контент-сервера, а затем должен использовать его как свою модель в клиенте.
 14 мар. 2014 г., 00:22
Рад, что смог помочь. Конечно, вообще говоря, вы захотите создать свой контент на стороне сервера в виде JSON, и ваше приложение будет манипулировать моделью на основе этого, но иногда полезно иметь другие варианты, и это только один.
 20 сент. 2013 г., 16:43
Вы не должны делать какие-либо манипуляции / обнаружение DOM в своих контроллерах. Вместо этого следует использовать директиву.
 18 окт. 2013 г., 19:14
Я явно упомянул этот недостаток в своем ответе. Выshouldn't, но тыcan, Все зависит от того, считаете ли вы более важным следовать соглашениям Angular или HTML. Потому что Angular ломает HTML.
 05 дек. 2013 г., 00:02
Ох яam манекен Полностью пропустил немного об использовании директивы. Ответ обновлен соответственно. Искренне извиняюсь за то, что был придурком, @dmackerman.
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}}
 26 июл. 2016 г., 21:04
@smoksnes - вы абсолютно правы. Я обновил ответ :)
 11 нояб. 2016 г., 16:48
Идеальный ответ, спасибо @superluminary
 23 июн. 2015 г., 22:38
Здесь упакованный модуль, который реализует решение, аналогичное описанному здесь.github.com/platanus/angular-keep-values
 25 июл. 2016 г., 09:51
Отличное решение, но оно будет работать только сinput="text", Если у тебя естьnumber это броситModel is not of type number docs.angularjs.org/error/ngModel/numfmt?p0=333
 25 июл. 2016 г., 09:55
Для поддержки номеров вы можете добавитьif (attrs.type === "number") val = parseInt(val);

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

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

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

 07 июл. 2013 г., 03:57
@JZ., Здесьfiddle
 17 нояб. 2014 г., 14:44
Очень ценю ответ Марка, поскольку он решил мою проблему. Я подтверждаю, что нам не нужноvalue="Bob" часть во входном теге.
 08 дек. 2012 г., 07:35
Вам может не понадобиться «значение =» Боб ». часть.
 13 мар. 2013 г., 06:24
+1, но, как упоминалось в одном из постов в связанном обсуждении, этого следует избегать (поскольку логически это менее правильно и затрудняет тестирование).
 29 апр. 2014 г., 18:54
Этот метод работает хорошо, если вы используете значение модели также на v1.2. & lt; ... ng-init = & quot; rootFolders = someModelAttribute & quot; ... & gt;

Здесь вы можете инициализировать 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>                

помните, что значение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"/>
 05 мая 2016 г., 17:04
Чувствует себя странно, чтобы инициировать его в директиве / разметке вместо контроллера.

Нет необходимости в $ 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;
}]);
 26 мая 2015 г., 04:27
имейте в виду, что ngModelController. $ setViewValue изменит состояние модели на грязное и нетронутое на ложное, что также повлияет на состояние формы, что может иногда вызывать боль.

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

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);
      }
    }
  };
});
 01 окт. 2014 г., 01:39
Это не только умное, но и лучшее решение. В моем случае я не могу установить значение по умолчанию для ng-модели на контроллере, потому что это форма PHP, если проверка на стороне сервера завершится неудачно, форма обновится и все, что находится в ng-модели, будет потеряно при удалении входного значения тоже.
 26 июл. 2014 г., 18:58
Это лучший ответ, который я нашел! ... элегантно решает мою проблему. Мне пришлось записать значение на скрытый ввод (токен формы Symfony, созданный на сервере).
 25 дек. 2013 г., 08:54
Я не вижу причин, чтобы этот ответ не был одобрен
 02 дек. 2014 г., 22:31
Это кажется лучшим решением, если вы также хотите, чтобы базовая версия HTML-формы работала без JavaScript.
 27 янв. 2015 г., 18:47
Да! Люблю это решение!

Ваш ответ на вопрос