Question

我尝试使用来自Database / JSON的数据填充表单。

我可以填充文本字段，但由于某种原因，选择下拉列表和复选框没有填充数据。选择应该有＆＃34;男性＆＃34;并且应勾选复选框，因为它已设置为真。

代码：

    <form>
    <label>Gender:</label>
    <select id="s1" ng-model="myData.gender"></select>
    <br>
    <label>Name:</label>
    <input type="text" ng-model="myData.name">
    <br>
    <label>Active:</label>
    <input type="checkbox" ng-model="myData.active" value="" id="checkbox" name="check" ng-init="myData.active=myData.active"><br>
    <input type="button" value="Save" ng-click="Update">
  </form>

    //assume these data coming from database
      $scope.myData = {
        "name" :  "John",
        "active" : "true",
        "gender" : "male"
      };

所以基本上整个想法是，当填充字段时，用户可以更改值，然后点击Save按钮，它将使用新数据更新数据库。

有人可以帮忙吗？

PLUNR

Answer 1

您需要在模板中进行一些更改

<label>Gender:</label>
<select 
  id="s1" 
  ng-model="myData.gender" 
  ng-options="sex for sex in ['male', 'female']">
</select>

<br>
<label>Name:</label>
<input 
  type="text" 
  ng-model="myData.name">

<br>
<label>Active:</label>
<input 
 type="checkbox"  
 ng-model="myData.active"  
 id="checkbox" 
 name="check" >

<br>
<input type="button" value="Save" ng-click="Update">

和数据

//assume these datra coming from database
$scope.myData = {
    "name" :  "John",
    "active" : true,  // it will be true not string "true"
    "gender" : "female"
  };

这里是working pluck

如果来自db的数据无效，则使用Transformer使数据对js有效。简而言之，从db。

中投射int和boolean

Answer 2

对于初学者来说，你的真实值是一个字符串，而不是一个布尔值（使用true而不是＆＃34; true＆＃34;），这就是复选框无效的原因。

$ scope.myData = {           ＆＃34;名称＆＃34; ：＆＃34; John＆＃34;，           ＆＃34;有源＆＃34; ：＆＃34; true＆＃34;，           ＆＃34;两性＆＃34; ：＆＃34;男性＆＃34;         };

$ scope.myData = {           ＆＃34;名称＆＃34; ：＆＃34; John＆＃34;，           ＆＃34;有源＆＃34; ：真的，           ＆＃34;两性＆＃34; ：＆＃34;男性＆＃34;         };

其次，您的选择没有任何选项，因此您应该将以下内容添加到HTML中。

<option value="male">Male</option>
<option value="female">Female</option>

或使用ng-options。

Plunkr

Answer 3

首先，你应该寻求一个好的tutorial： -

你不能直接用ng-model绑定select它是无效的。

现在不需要简单的myData作为对象，而是需要创建一个数组，因为ng-options只能用于数组。

$scope.myData = [{
    "name" :  "John",
    "active" : "true",
    "gender" : "male"
  }];

在HTML中：

 <select id="s1" ng-model="selected" ng-options="item.gender for item in myData">
    </select>

这是plunker

Answer 4

您也可以将'ng-checked'指令添加到输入复选框（参见this）

<input type="checkbox" ng-checked="myData.active" ng-model="myData.active" value="" id="checkbox" name="check" ng-init="myData.active=myData.active">

Angularjs填充JSON中的select和复选框不起作用

4 个答案: