others - Angular js初始化 ng-model的默认值

假设有一个从数据库加载值的表单,如何初始化ng-model?

例如:


<input name="card[description]" ng-model="card.description" value="Visa-4242">

在我的控制器中,$scope card最初是未定义的,除了这样做还有什么方法?


$scope.card = {
 description: $('myinput').val()
}

时间:

这是Angular应用程序中常见的错误,

理想情况下,您要发送Angular HTML模板,然后通过$ http在JSON中提取值并将其放在您的scope中。

因此,如果可能,请执行以下操作:


app.controller('MyController', function($scope, $http) {
 $http.get('/getCardInfo.php', function(data) {
 $scope.card = data;
 });
});

<input type="text" ng-model="card.description" />

如果必须从服务器将值呈现到HTML中,则可以将它们放在全局变量中,并使用$window访问它们:

在你的页面标题中:


<head>
 <script>
 window.card = { description: 'foo' };
 </script>
</head>

然后在你的控制器里,你会得到这样的结果:


app.controller('MyController', function($scope, $window) {
 $scope.card = $window.card;
});

希望能帮助你。


<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">

只需编写一个directive指令,从输入字段设置模型值。


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


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

下面是一个服务器中心的方法:


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

因此在服务器上,你可以有如下内容:


{
 description:"Visa-4242"
}

下面是要点:https://gist.github.com/exclsr/c8c391d16319b2d31a43

你可以使用自定义指令( 通过对textarea的支持,选择,单选和复选框),请查看这篇博客文章 http://blog.glaucocustodio.com//init-ng-model-from-form-fields-attributes/ 。txt 。


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

它自动将模型的值设置为标记属性的值,如果不设置值属性,它将默认为空字符串。

就像其他人指出的,在视图中初始化数据不是好做法,建议在控制器上初始化数据,(请参见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;
});

这样视图不包含数据,而且控制器在加载实值时初始化值。

我尝试了 @Mark Rajcok的建议。 它对字符串值( Visa-4242 )的工作。 请参考这个

来自小提琴:

在小提琴中完成的同样的事情可以用 ng-repeat 完成,大家都可以推荐。 但是,在读取 @Mark Rajcok给出的答案之后,我只想尝试一个具有配置文件数组的表单。 在我拥有 $scope.profiles = [{},{} ],控制器中的代码之前,一切正常。 如果删除这里代码,我将得到错误。 但是在正常情况下,我无法打印 $scope.profiles = [{},{}];,因为我从服务器打印或者回显 html 。 可以用类似于 @Mark Rajcok对字符串值这样的方式执行上述操作 <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'"> ,不必从服务器上回显JavaScript部件。


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

});

...