angular 文本框中使用 ng-init 从控制器传递的变量的默认值未显示

Question

我想使用 ng-init 在编辑表单中显示输入文本框的默认值，但无论我做什么我都做不到。

这是我写的。

在控制器中：

.controller('ProfileCtrl', function ($scope, $http) {
   $http.get('users.php').then(function (result) {  
   $scope.data = result.data;

   $scope.username = $scope.data.username;
   $scope.email = $scope.data.email;
   $scope.phone = $scope.data.phone;
});

在视图中：

   <label class="item item-input item-stacked-label">
       <span class="input-label">Username</span>
       <input type="text" ng-model="formData.username" placeholder="Email" ng-init="formData.email={{username}}">
   </label>
   <label class="item item-input item-stacked-label">
          <span class="input-label">Phone</span>
             <input type="text" ng-model="formData.phone" placeholder="0815********" ng-init="formData.phone='{{phone}}'">
    </label>
    <label class="item item-input item-stacked-label">
          <span class="input-label">Email</span>
          <input type="text" ng-model="formData.email" placeholder="" ng-init="formData.email='{{email}}'">
    </label>

我也试过写 ng-init="formData.email={{email}}" 和 ng-init="formData.email=email" 但还是不行。

Answer 1

所以你的主要问题是设置 ng-init，首先如果你想这样设置你不应该在 ng-init 中使用 {{ scopevar }}，而只是 scopevar.

但即便如此，也没有理由像您尝试的那样去做。在现场设置数据模型后，它会在您获取数据时自动更新 - angular 将为您完成一切，只需像下面的示例一样设置它：

.controller('ProfileCtrl', function ($scope, $http) {
   $http.get('users.php').then(function (result) {  
   $scope.formData = result.data;
});
});

并从您的代码中删除 ng-inits。

<label class="item item-input item-stacked-label">
       <span class="input-label">Username</span>
       <input type="text" ng-model="formData.username" placeholder="Email" >
   </label>
   <label class="item item-input item-stacked-label">
          <span class="input-label">Phone</span>
             <input type="text" ng-model="formData.phone" placeholder="0815********" >
    </label>
    <label class="item item-input item-stacked-label">
          <span class="input-label">Email</span>
          <input type="text" ng-model="formData.email" placeholder="">
    </label>

此外，我还制作了一个 fiddle 简化示例。 https://jsfiddle.net/pegla/9mqz8drh/1/

Answer 2

<label class="item item-input item-stacked-label">
   <span class="input-label">Username</span>
   <input type="text" ng-model="formData.username" placeholder="Email" >

从您的代码中删除 ng-init。让你的控制器保持这样

   .controller('ProfileCtrl', function ($scope, $http) {
   $http.get('users.php').then(function (result) {  
   $scope.formData = result.data;
});
});

angular 文本框中使用 ng-init 从控制器传递的变量的默认值未显示

Default value of a variable passed from controller with ng-init in angular text box not showing

javascript

angularjs

ng-init