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

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

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

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

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

• добавлена проверка для ngModel перед попыткой использовать $parse().assign() на полях без атрибутов ngModel.
• исправил assign() порядок функции param.

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);
      }
    }
  };
});

угловой путь

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

Если, однако, у вас нет времени, чтобы начать с нуля

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

использование директивы

вы можете использовать относительно простую директиву, чтобы вытащить значение из формы и загрузить его в текущая область. Здесь я определил директиву 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}}

обновление: мой первоначальный ответ включал наличие контроллера, содержащего код DOM-aware, который нарушает угловые соглашения в пользу HTML. @dmackerman упомянул директивы в комментарии к моему ответу, и я полностью пропустил это до сих пор. С этим вводом, вот право способ сделать это, не нарушая угловые или 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 атрибут как угловое выражение (хотя я бы, вероятно, использовал другой [пользовательский] атрибут для этого лично, поэтому стандартные атрибуты HTML последовательно рассматриваются как константы).

кроме того, есть аналогичный вопрос на создание данных, шаблонных в доступных для ng-model что также может представлять интерес.

Если вы используете директиву AngularJs ngModel, помните, что значение value атрибут не привязывается к полю ngModel.Вы должны init его самостоятельно и лучший способ сделать это,это

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

Это небольшая модификация предыдущих ответов...

нет необходимости в $ 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;
}]);

привет вы можете попробовать ниже методы с инициализацией модели.

здесь вы можете инициализировать ng-модель textbox двухсторонним

- С использованием ng-init

- С использованием $ scope в 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:'bhatt.bhaskar88@gmail.com',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>                

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

он в основном используется на элементах ввода[radio] и option, так что при выборе элемента ngModel этого элемента (или его родительского элемента select) устанавливается в связанное значение.

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

<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>

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

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

[(ngModel)]=userDataToPass.pinCode

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

для того же , я говорил это видео на YouTube