首页 文章

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

提问于
浏览 1797
209

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

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

任何人都知道一个简单的工作来默认这个输入的东西并保持 ng-model ?我尝试使用带有默认值的 ng-bind ,但这似乎也不起作用 .

10 回答

  • 214

    您好,您可以尝试以下方法初始化模型 .

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

    - 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:'bhatt.bhaskar88@gmail.com',address:'Ahmedabad'};">
            Name : <input type="text" ng-model="user.fullname" />
    Email : <input type="text" ng-model="user.email" />
    Address:<input type="text" ng-model="user.address" />
    </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" />
    Experience : <input type="text" name="experience" ng-model="user.exp" />
    Skills : <input type="text" name="skills" ng-model="user.skills" />
    </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>
  • 179

    Update: 我的原始答案涉及让控制器包含DOM感知代码,这会破坏Angular约定以支持HTML . @dmackerman在评论我的答案时提到了指令,直到现在我完全错过了 . 有了这个输入,这是在不破坏Angular or 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表达式(尽管我可能使用不同的[custom]属性,就个人而言,标准HTML属性始终被视为常量) .

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

  • 66

    如果您使用AngularJs ngModel指令,请记住 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"/>
    
  • 21

    我有类似的问题 . 我无法使用 value="something" 进行显示和编辑 . 我必须在我的 <input> 中使用下面的命令以及声明的模型 .

    [(ngModel)]=userDataToPass.pinCode
    

    我在对象 userDataToPass 中有数据列表,我需要显示和编辑的项目是 pinCode .

    为此,我提到this YouTube video

  • 7

    这是期望的行为,您应该在控制器中定义模型,而不是在视图中定义 .

    <div ng-controller="Main">
      <input type="text" ng-model="rootFolders">
    </div>
    
    
    function Main($scope) {
      $scope.rootFolders = 'bob';
    }
    
  • 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;
    }]);
    
  • 5

    覆盖输入指令确实可以完成这项工作 . 我对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);
          }
        }
      };
    });
    
  • 0

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

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

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

  • 0

    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}}
    
  • 0

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

    它主要用于input [radio]和option元素,因此当选择元素时,该元素的ngModel(或其select元素)将设置为bound值 .

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

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

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

相关问题