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

Question

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

我可以填充文本字段，但由于某种原因，select 下拉菜单和复选框未填充数据。 select 应该有 "male" 并且应该勾选复选框，因为它设置为 true。

代码：

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

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

有人能帮忙吗？

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 而不是 "true"），这就是复选框不起作用的原因。

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

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

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

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

Or use ng-options.

Plunkr

Answer 3

首先你应该去好好的tutorial :-

您不能将 select 直接与 ng-model 绑定，它无效。

现在您需要创建一个数组而不是简单的 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 填充 select 和 JSON 中的复选框不起作用

Angularjs populate the select and checkbox from JSON not working

json

angularjs

angularjs-scope