如果我将一个简单的输入文本框值设置为下面的“bob”，则使用 AngularJS。如果添加了ng-model 属性，则不会显示该值。
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
任何人都知道一个简单的解决方法来将此输入默认为某些东西并保留ng-model？我尝试使用带有默认值的ng-bind，但这似乎也不起作用。
【问题讨论】：
标签： javascript html angularjs
我有类似的问题。我无法使用value="something" 来显示和编辑。
我必须在我的<input>中使用以下命令，同时声明模型。
[(ngModel)]=userDataToPass.pinCode
我有对象userDataToPass 中的数据列表，我需要显示和编辑的项目是pinCode。
同样，我提到了this YouTube video
【讨论】：
覆盖输入指令似乎确实可以完成这项工作。我对Dan Hunsaker的代码做了一些小改动：
$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);
}
}
};
});
【讨论】：
问题是您必须将 ng-model 设置为要设置 ng-value/value 的父元素。 正如 Angular 所说：
主要用在input[radio]和option元素上，这样当元素被选中时，该元素（或者它的select父元素）的ngModel被设置为绑定值。
例如：这是一个已执行的代码：
<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 响应，我只是将另一个属性添加到 JS 对象作为“MarketPeers”。所以模型和价值可能取决于需要，但我认为这个过程会有所帮助，同时拥有 ng-model 和 value 但不在同一个元素上。
【讨论】：
您好，您可以尝试以下方法初始化模型。
这里可以两种方式初始化文本框的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>
【讨论】：
正确的 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}}
【讨论】：
input="text"。如果您有 number，它将抛出 Model is not of type number docs.angularjs.org/error/ngModel/numfmt?p0=333
if (attrs.type === "number") val = parseInt(val);
如果你使用AngularJs ngModel指令，请记住value属性的值不绑定在ngModel字段上。你必须自己初始化它，最好的方法是
<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;
}]);
【讨论】：
更新：我最初的回答是让控制器包含可识别 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 表达式（尽管我可能会就个人而言，为此使用不同的 [custom] 属性，因此标准的 HTML 属性始终被视为常量）。
另外，Making data templated in available to ng-model 也有类似的问题，可能也很有趣。
【讨论】：
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
【讨论】：
value="Bob" 部分。
这是期望的行为，您应该在控制器中定义模型，而不是在视图中。
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}
【讨论】：