在使用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代碼,只取了其中最核心的。
如上操作,這樣就可以實現之前的需求了。