Question

如果我将一个简单的输入文本框值设置为下面的“bob”，请使用AngularJS。如果添加了ng-model属性，则不会显示该值。

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

任何人都知道如何简单地将此输入默认为某些内容并保留ng-model？我尝试使用带有默认值的ng-bind，但这似乎也不起作用。

Answer 1

这是理想的行为，您应该在控制器中定义模型，而不是在视图中定义。

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


function Main($scope) {
  $scope.rootFolders = 'bob';
}

Answer 2

Vojta描述了“Angular方式”，但如果你真的需要做这项工作，@ newanek最近发布了一个使用ng-init的解决方法：

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

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

Answer 3

覆盖输入指令确实可以完成这项工作。我对Dan Hunsaker的代码进行了一些小改动：

在尝试在没有ngModel属性的字段上使用$parse().assign()之前添加了对ngModel的检查。
更正了assign()函数参数顺序。

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

Answer 4

Angular方式

正确的Angular方法是在表单模板中编写单页面应用程序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}}

注意这也适用于textareas，并选择下拉列表。

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

Answer 5

更新：我的原始答案涉及让控制器包含支持DOM的代码，这会破坏Angular约定以支持HTML。 @dmackerman在评论我的答案时提到了指令，直到现在我完全错过了。使用该输入，这是正确的方式，无需破坏Angular 或 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属性视为Angular表达式（虽然我个人可能会使用不同的[自定义]属性，因此标准HTML属性始终被视为常量）。

此外，在Making data templated in available to ng-model也存在一个类似的问题，这也可能是有意义的。

Answer 6

如果您使用AngularJs ngModel指令，请记住value属性的值不会绑定在ngModel字段。您必须自己初始化它并采用最佳方法，是

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

Answer 7

这是对早期答案的略微修改......

不需要$ 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;
}]);

Answer 8

您好，您可以尝试以下方法初始化模型。

在这里，您可以双向初始化文本框的ng-model

- 使用ng-init

- 在js中使用$ scope

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

Answer 9

问题是您必须将ng-model设置为您要设置ng值/值的父元素。正如Angular所说：

它主要用于input [radio]和option元素，因此当选择元素时，该元素的ngModel（或其select元素）将被设置为绑定值。

例如：这是一个执行的代码：

<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>

注意：在上面这种情况下，我已经对ng-model和值进行了JSON响应，我只是将另一个属性添加到JS对象中作为＆＃34; MarketPeers＆＃34;。所以模型和价值可能会根据需要而有所不同，但我认为这个过程有助于同时拥有ng-model和value，但不会将它们放在同一个元素上。

Answer 10

我有类似的问题。我无法使用value="something"进行显示和编辑。我必须在<input>内部使用以下命令，并声明ng模型。

[(ngModel)]=userDataToPass.pinCode

我有对象userDataToPass中的数据列表，而我需要显示和编辑的项是pinCode。

同样，我指的是this YouTube video

AngularJS - 使用ng模型时，忽略输入文本框的Value属性？

10 个答案:

Angular方式

但是，如果你没有时间从头开始

使用指令