對ng-repeat得到的radio添加選中事件

在使用angularjs開發的過程中,遇到了對ng-repeat得到的radio進行默認選中的業務需求。進過一番努力,終於找到了一個解決辦法。

先描述一下業務需求,如果瀏覽者有雷同需求,可以參考一下:前臺頁面顯示人員信息列表,對列表中的人員信息可以進行增刪改,每條記錄前有一個radio。當選中一條記錄修改後,會更新數據庫,同時會更新前臺的列表。要求前臺更新後被修改的那條記錄依然被選中。

現在說一下解決的方法:

1、html

在html頁面的ng-repeat得到的radio的屬性中添加一個ng-checked屬性。如下:

<div class="content" ng-repeat="person in data.person_list">
    <input type="radio" name="n1" ng-checked="person.checked">
    <span ng-bind="person.person_name"></span>
</div>
2、js

在該頁面的js中,對從後臺返回得到的新的person_list中的元素進行檢查,匹配到之前被選中的那條記錄時,將該條記錄的checked屬性置爲checked,如下:

$scope.data.person_list = $response.result.person_list;

for(var i=0;i<$scope.data.person_list.length;i++){
    if($scope.data.person_list[i].person_id== person_id){
        $scope.data.person_list[i].checked = 'checked';
        break;
    }
}
這裏省略了很多的js代碼,只取了其中最核心的。

如上操作,這樣就可以實現之前的需求了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章