Angular js从默认值初始化模型
假设你有一个从数据库加载值的表单。 你如何初始化ng模型？
例：
<input name="card[description]" ng-model="card.description" value="Visa-4242"> 在我的控制器中，$ scope.card最初是未定义的。 有没有办法做这样的事情？
$scope.card = { description: $('myinput').val() }
这是新的Angular应用程序常见的错误。 如果可以避免，则不需要将值写入服务器上的HTML中。 如果事实上，如果你可以摆脱你的服务器完全呈现HTML，那就更好了。
理想情况下，你想发送你的Angular HTML模板，然后通过JSON中的$ http下拉你的值，并把它们放在你的范围内。
所以如果可能的话，就这样做：
app.controller('MyController', function($scope, $http) { $http.get('/getCardInfo.php', function(data) { $scope.card = data; }); }); <input type="text" ng-model="card.description" />
如果您绝对必须将您的值从服务器呈现到您的HTML中，则可以将它们放入全局variables中，并使用$ window访问它们：
在你的页面的头部你会写出：
<head> <script> window.card = { description: 'foo' }; </script> </head>
然后在你的控制器中，你会得到这样的：
app.controller('MyController', function($scope, $window) { $scope.card = $window.card; });
我希望有帮助。
如果你不能重写你的应用程序来执行@bleshbuild议的操作（使用$ http或$ resource拉取JSON数据并填充$ scope），你可以使用ng-init代替：
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">
当使用ng模型时，也会忽略input文本框上的AngularJS – Value属性？
对于AngularJS来说，这是一个显而易见的缺点，但是很容易补充。 只需编写一个快速指令，即可从input字段中设置模型值。
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>
这是我的版本：
var app = angular.module('forms', []); app.directive('ngInitial', function() { return { restrict: 'A', controller: [ '$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) { var getter, setter, val; val = $attrs.ngInitial || $attrs.value; getter = $parse($attrs.ngModel); setter = getter.assign; setter($scope, val); } ] }; });
恕我直言，最好的解决scheme是@Kevin Stone指令，但是我必须升级它才能在任何情况下工作（fe select，textarea），而且这个工作肯定会奏效：
angular.module('app').directive('ngInitial', function($parse) { return { restrict: "A", compile: function($element, $attrs) { var initialValue = $attrs.value || $element.val(); return { pre: function($scope, $element, $attrs) { $parse($attrs.ngModel).assign($scope, initialValue); } } } } });
你可以使用自定义指令（支持textarea，select，radio和checkbox），看看这个博客文章https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form-字段属性/ 。
你也可以在你的HTML代码中使用： ng-init="card.description = 12345"
Angular不推荐这样做，如上所述，您应该只使用您的控制器。
但它的作品:)
我有一个简单的方法，因为我有一些重要的validation和面具在我的forms。 所以，我用jquery再次获得我的价值，并将事件“更改”发送到validation：
$('#myidelement').val('123'); $('#myidelement').trigger( "change");
正如其他人所指出的，初始化视图数据并不是一个好习惯。 初始化控制器上的数据，但是，build议。 （请参阅http://docs.angularjs.org/guide/controller ）
所以你可以写
<input name="card[description]" ng-model="card.description">
和
$scope.card = { description: 'Visa-4242' }; $http.get('/getCardInfo.php', function(data) { $scope.card = data; });
这样视图不包含数据，并且控制器在加载实际值时初始化该值。
如果你喜欢凯文·斯通的方法， 请参考https://stackoverflow.com/a/17823590/584761，通过编写诸如“input”之类的特定标签的指令来考虑更简单的方法。;
app.directive('input', function ($parse) { return { restrict: 'E', require: '?ngModel', link: function (scope, element, attrs) { if (attrs.ngModel) { val = attrs.value || element.text(); $parse(attrs.ngModel).assign(scope, val); } } }; });
如果你走这条路线，你不用担心每个标签都加ng-initial。 它会自动将模型的值设置为标签的值属性。 如果你没有设置值属性，它将默认为一个空string。
这是一个以服务器为中心的方法：
<html ng-app="project"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script> // Create your module var dependencies = []; var app = angular.module('project', dependencies); // Create a 'defaults' service app.value("defaults", /* your server-side JSON here */); // Create a controller that uses the service app.controller('PageController', function(defaults, $scope) { // Populate your model with the service $scope.card = defaults; }); </script> <body> <div ng-controller="PageController"> <!-- Bind with the standard ng-model approach --> <input type="text" ng-model="card.description"> </div> </body> </html>
除了$ provide.value注册一个包含默认值的服务之外，这个问题和这个问题上比较stream行的答案基本相同。
所以，在服务器上，你可以有这样的东西：
{ description: "Visa-4242" }
并通过您select的服务器端技术将其放入您的页面。 这是一个要点： https ： //gist.github.com/exclsr/c8c391d16319b2d31a43
我尝试了@Mark Rajcok的build议。 它为string值（Visa-4242）工作。 请参考这个小提琴 。
从小提琴：
在小提琴中所做的同样的事情可以使用ng-repeat来完成，每个人都可以推荐。 但是在阅读@Mark Rajcok给出的答案之后，我只是想试试一个带有configuration文件数组的表单。 事情工作良好，直到我有$ scope.profiles = [{}，{}]; 代码在控制器中。 如果我删除这个代码，即时通讯错误。 但在正常情况下，我不能打印$scope.profiles = [{},{}]; 当我打印或从服务器回显HTML。 是否有可能执行上述，以@Mark Rajcok类似的方式为string值，如<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'"> ，而不必从服务器回显JavaScript部分。
这是上面提到的思想的一个更通用的版本…它只是检查模型中是否有任何价值，如果不是，它将值设置为模型。
JS：
function defaultValueDirective() { return { restrict: 'A', controller: [ '$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) { var getter = $parse($attrs.ngModel); var setter = getter.assign; var value = getter(); if (value === undefined || value === null) { var defaultValueGetter = $parse($attrs.defaultValue); setter($scope, defaultValueGetter()); } } ] } }
HTML（使用示例）：
<select class="form-control" ng-options="v for (i, v) in compressionMethods" ng-model="action.parameters.Method" default-value="'LZMA2'"></select>
刚刚添加了对Ryan Montgomery的“select元素”的支持“修复”
<select class="input-control" ng-model="regCompModel.numberOfEmployeeId" ng-initial> <option value="1af38656-a752-4a98-a827-004a0767a52d"> More than 500</option> <option value="233a2783-db42-4fdb-b191-0f97d2d9fd43"> Between 250 and 500</option> <option value="2bab0669-550c-4555-ae9f-1fdafdb872e5"> Between 100 and 250</option> <option value="d471e43b-196c-46e0-9b32-21e24e5469b4"> Between 50 and 100</option> <option value="ccdad63f-69be-449f-8b2c-25f844dd19c1"> Between 20 and 50</option> <option value="e00637a2-e3e8-4883-9e11-94e58af6e4b7" selected> Less then 20</option> </select> app.directive('ngInitial', function () { return { restrict: 'A', controller: ['$scope', '$element', '$attrs', '$parse', function ($scope, $element, $attrs, $parse) { val = $attrs.sbInitial || $attrs.value || $element.val() || $element.text() getter = $parse($attrs.ngModel) setter = getter.assign setter($scope, val) }] }
}）;
如果你的URL有像mypage/id这样的init值，那么在angularJS的控制器中，你可以使用location.pathname来find这个id，并把它分配给你想要的模型。
