AngularJS 單選按鈕未綁定到模型

Question

使用 AngularJS 時，我面臨將單選按鈕綁定到 MVC 模型的問題，所有其他字段都成功綁定到 MVC 模型，但單選按鈕未綁定。 請建議我在哪里弄混了我的電線。

HTML

<tr ng-repeat="item in experienceModel">
                <td><input type="text" name="StartDate" ng-model="item.StartDate | date:'dd-MM-yyyy'" id="date_teachingStart{{$index}}"/></td>
                <td><input type="text" name="EndDate" ng-model="item.EndDate | date:'dd-MM-yyyy'" id="date_teachingEnd{{$index}}"/></td>
                <td><input type="text" name="SubjectArea" ng-model="item.SubjectArea"/></td>
                <td><input type="text" name="Position" ng-model="item.Position"/></td>
                <td><input type="text" name="Institution" ng-model="item.Institution"/></td>
                <td><input type="text" name="City" ng-model="item.City"/></td>
                <td><input type="text" name="Country" ng-model="item.Country"/></td>
                <td class="centerAlign"><input type="radio" name="item.IsCurrent" value="{{$index}}" ng-model="selected.item" id="radio_experience[{{$index}}]" /></td>                    
                <td><a class="removeRow" title="Delete item" href="" ng-click="removeRow()"></a></td>
                <td><input type="hidden" name="CVId" ng-model="item.CVID" /></td>
                <td><input type="hidden" name="ExperienceID" ng-model="item.ExperienceID" /></td>
            </tr>

腳本

 var experienceModel = <%: Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model.TeachingExperience)) %>
     app.value("experienceModel", experienceModel);

角度控制器

 app.controller('TeachingController', ['$scope', 'experienceModel',
function ($scope, experienceModel) {

        $scope.counter = 0;            

        $scope.selected = {};

        $scope.experienceModel = experienceModel;

        // Set the selected value to reflect initial data 
        $scope.experienceModel.forEach(function (item, index) {
            if (item.IsCurrent) {
                $scope.selected.item = index;
            }
        });

        if ($scope.experienceModel == null) {
            $scope.experienceModel = [{ 'ExperienceID': '', 'CVID': '', 'ExperienceCategoryId': '', 'StartDate': '', 'EndDate': '', 'SubjectArea': '', 'NoOfDays': '', 'Position': '', 'Programme': '', 'KnowledgeArea': '', 'Institution': '', 'Client': '', 'City': '', 'Country': '', 'IsCurrent': '' }];
        }

        if ($scope.experienceModel.length == 0) {
            $scope.experienceModel.push({ 'ExperienceID': '', 'CVID': '', 'ExperienceCategoryId': '', 'StartDate': '', 'EndDate': '', 'SubjectArea': '', 'NoOfDays': '', 'Position': '', 'Programme': '', 'KnowledgeArea': '', 'Institution': '', 'Client': '', 'City': '', 'Country': '', 'IsCurrent': '' });
        }

        $scope.$watch('selected.item', function (index) {
            $scope.items.forEach(function (item, i) {
                item.isCurrent = i === parseInt(index);
            });
        });

        $scope.counter = 1;

    $scope.addRow = function () {
        $scope.experienceModel.push({ 'ExperienceID': '', 'CVID': '', 'ExperienceCategoryId': '', 'StartDate': '', 'EndDate': '', 'SubjectArea': '', 'NoOfDays': '', 'Position': '', 'Programme': '', 'KnowledgeArea': '', 'Institution': '', 'Client': '', 'City': '', 'Country': '', 'IsCurrent': '' });
        $scope.counter++;
    }
    $scope.removeRow = function () {
        var row = $(this);
        $scope.experienceModel.splice(row[0].$index, 1);
        $scope.counter--;
    }
}]);

Answer 1

在 AngularJS 中負責雙向數據綁定的“東西”是ng-model 。 您應該在您希望用戶與之交互的所有表單字段上設置此屬性。

可以這么說，它將負責為您設置字段的值 - 因此應該刪除value屬性。 您可以擁有ng-model或value但如果您決定只設置該值（在某些情況下是有意義的，例如readonly字段），它將僅在一個方向上綁定 - 它會對模型的更改做出反應，但不會能夠改變模型。

好的，在這個理論介紹之后，這里有一個可能的解決方案：

 angular.module('app', []) .controller('ctrl', function($scope) { // Sample data $scope.items = [ {name: 'First', isCurrent: false}, {name: 'Second', isCurrent: false}, {name: 'Third', isCurrent: false}, {name: 'Fourth', isCurrent: false} ]; /* Object to track selected things. (It's better to use objects * rather than plain variables to avoid problems with variable's scope) */ $scope.selected = {}; // Set the selected value to reflect initial data $scope.items.forEach(function(item, index) { if (item.isCurrent) { $scope.selected.item = index; } }); /* If selected item changes, set corresponding item's * isCurrent property to true and all others to false */ $scope.$watch('selected.item', function(index) { $scope.items.forEach(function(item, i) { item.isCurrent = i === parseInt(index); }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <body ng-app="app" ng-controller="ctrl"> <ul> <li ng-repeat="item in items"> {{ item.name }} <label> <input type="radio" ng-model="selected.item" value="{{ $index }}">current </label> </li> </ul> <pre>{{ items | json }}</pre> </body>

好的，所以在合並這個和我們在評論中澄清的事情之后，你的 html 代碼應該是這樣的：

<!-- (...) -->
<td><input type="text" name="city" ng-model="item.City" /></td>
<td><input type="text" name="country" ng-model="item.Country" /></td>
<td class="centerAlign"><input type="radio" ng-model="selected.item" /></td>
<td><a class="removeRow" title="Delete item" href="" ng-click="removeRow($index)"></a></td>
<!-- (...) -->

注意一些“獎勵”改進：

• 使用AngularJS 時，您不需要使用href="javascript:void(0)" 。 href=""就足夠了（ https://docs.angularjs.org/api/ng/directive/a ）
• 刪除一行時，最簡單的方法是將迭代的$index傳遞給removeRow()函數
• 如果您不使用 Angular 的驗證，則不需要name屬性
• 如果您不使用標簽（特別是<label for="sth" > ），則不需要id屬性