AngularJS：将ngrepeat值绑定到AngularJS中的模型答案

【问题标题】：AngularJS : Binding ngrepeat values to model in AngularJSAngularJS：将ngrepeat值绑定到AngularJS中的模型
【发布时间】：2015-06-21 11:43:37
【问题描述】：

我正在创建一个简单的 FHIR 客户端来使用 AngularJS 编辑患者数据。我不明白为什么输入中的值没有绑定到对象中的值。

当然，我可以作弊并实现 keyup 和 $scope.$apply()，但有件事告诉我这不是 AngularJS 应该做的。

我尝试使用$index 将值直接绑定到数组中的值，但这似乎没有任何作用。

代码如下：

var app = angular.module('FhirClient', []);
app.controller('PatientCtrl', function ($scope, $http) {

console.log("Evaluating Patient");
var responsePromise = $http.get("http://nprogram.azurewebsites.net/Patient/1?_format=json&_sm_au_=iMH046nNq52RDM6q");

responsePromise.success(function (data, status, headers, config) {
    console.log("Successful connection");
    $scope.patient = data;
});
responsePromise.error(function (data, status, headers, config) {
    alert("AJAX failed!");
});

$scope.$watch('patient', function (newValue, oldValue) {
    console.log(newValue);
});

});

还有以下 HTML：

<div ng-controller="PatientCtrl">
    <div class="container">
        <h1>Patient Details</h1>

        <code>{{patient | json}}</code>
        <div class="col-md-6">
            <h2>Names</h2>
            <div class="list-group" ng-repeat="names in patient.name track by $namesIndex">
                <h3><span class="label label-primary">{{x.use}}</span></h3>
                <div class="form-group" ng-repeat="lastName in names.family track by $familyNamesIndex">
                    <label for="familyName">Family Names:</label>
                    <input class="form-control" ng-model="lastName" />
                </div>
                <div class="form-group" ng-repeat="firstName in names.given">
                    <label for="givenName">Given Names:</label>
                    <input class="form-control" type="text" ng-model="firstName"/>
                </div>
            </div>
        </div>
        <div class="col-md-6"></div>
    </div>
</div>

和 JSON：

{
"resourceType":"Patient",
    "text":
    {
        "status": "generated",
        "div": "<div xmlns='http://www.w3.org/1999/xhtml'><p>Harley N Hobbs</p><p>16 Pier Road</p><p>STANWARDINE IN THE FIELDS</p><p>SY4 7IW</p><p>Date of birth: 1966-06-07</p></div>"
    },
    "identifier":
    [{
        "use": "official",
        "label": "SSN",
        "system": "http://hl7.org/fhir/sid/us-ssn",
        "value": "1"
    }],
    "name":
    [{
        "use": "official",
        "family":[ "Hobbs"],
        "given":[ "Harley"]
    }],
    "telecom":
    [{
        "system": "phone",
        "value": "077 8169 8899",
        "use": "home"
    }],
    "gender":
    {
        "coding":
        [{
            "system": "http://hl7.org/fhir/sid/v2-0001",
            "code": "male"
        }]
    },
    "birthDate": "1966-06-07",
    "deceasedBoolean": false,
    "address":
    [{
        "use": "home",
        "text": "16 Pier Road, STANWARDINE IN THE FIELDS, SY4 7IW",
        "line":[ "16 Pier Road"],
        "city": "STANWARDINE IN THE FIELDS",
        "zip": "SY4 7IW"
    }],
    "careProvider":
    [{
        "reference": "../organization/@1"
    }],
    "active": true

}

对我在这里做错了什么有什么想法吗？

这是一个简化的 JSFiddle：https://jsfiddle.net/gmpp2fyk/1/。如果您编辑文本框，JSON 似乎没有更新：$watch 不会触发，表达式保持原样。

【问题讨论】：

告诉我你的名字 JSON。
我对您使用 ng-repeat 有点怀疑。
您在 json 中只有一个“名称”。为什么要对单个对象执行 ng-repeat？
在这种特殊情况下，只有一个名字，但是，names 是一个数组，可以包含更多的名字，在这个数组中你有一个名字和姓氏的数组
@DawidO 我觉得没问题

标签： javascript angularjs angularjs-ng-repeat angularjs-ng-model

【解决方案1】：

我找到了解决办法。首先，绑定到ng-repeat 中的变量不起作用，因为它（显然）具有不同的范围。其次，使用 index 的直觉是对的，但它的做法是错误的：

这是可行的解决方案 (https://jsfiddle.net/gmpp2fyk/15/)：

<div ng-controller="PatientCtrl">
<div class="container">
    <h1>Patient Details</h1>
    {{patient | json}}
    <div class="col-md-6">
        <h2>Names</h2>
        <div class="list-group" ng-repeat="names in patient.name track by $index">
            <h3><span class="label label-primary">{{x.use}}</span></h3>
            <div class="form-group" ng-repeat="lastName in names.family track by $index">
                <label for="familyName">Family Names:</label>
                f:{{ $parent.$index }}
                <input class="form-control" ng-model="patient.name[$parent.$index].family[$index]" />
            </div>
            <div class="form-group" ng-repeat="firstName in names.given track by $index">
                <label for="givenName">Given Names:</label>
                <input class="form-control" type="text" ng-model="patient.name[$parent.$index].given[$index]" />
            </div>
        </div>
    </div>
    <div class="col-md-6"></div>
</div>

【讨论】：