如何使特定选项选择角度

时间:2013-10-02 10:21:37

标签: javascript html angularjs

因为无缝的数据绑定,所以我刚刚开始将正在进行的旧网站转换为使用angular而不是jquery。

现在我有一个正在填充数据集的选择;

<select ng-model="affiliation" ng-options="row.desc for row in affiliationTable"> <!--group by row.id-->
     <option value=""> Select an existing affiliation</option>
</select>

当用户点击表格中的锚标记时,我希望在选择中选择相应的“从属关系”,因此我的表格看起来像这样;

<tr ng-repeat="row in tableData">  <!--{{row.name}}-->
     <td><a href='#' ng-click="invokeModal();" onclick="lastClickedMember=this.id;" id="{{row.id}}">{{row.name}}</a></td>
     <td>{{row.active}}</td>
     <td>{{row.end_date}}</td>
     <td>{{row.start_date}}</td>
</tr>

这是我用来尝试选择特定选项的代码;

$scope.invokeModal = function(){ //memberDescription

    for(var row in $scope.tableData){
        if($scope.tableData[row].id == lastClickedMember){
            $scope.selectedMembershipDescription = $scope.tableData[row].desc;


            $scope.selectedMembershipId = lastClickedMember;
            $scope.selectedEndDate = $scope.tableData[row].end_date;
            $scope.selectedStartDate = $scope.tableData[row].start_date;
        }

        if($scope.affiliationTable[row].id == lastClickedMember){
            $scope.affiliation = $scope.affiliationTable[row]; //$scope.selectedMembershipDescription;
        }
    }

    jQuery("#mem").modal('show');
};

当然在尝试此代码以及其他一些选项后,我的选择仍然没有填充选项。

请有人帮助我。

修改 这是表格的填充方式;

$http(
    {
        url: "http://localhost/get_info.php",
        method: "POST",
        data: "filter=membership&cid=2",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }
).
success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
    //alert("first row: " + data.name[0]);
    for(var row in data.name){
        $scope.tableData.push({id:data.name[row][0], name:data.name[row][5], active:(data.name[row][1] == "0") ? "Not Active" : "Active", end_date:data.name[row][3], start_date:data.name[row][2]});
    }
});

//get affiliation table
$scope.affiliationTable = [];

$http({
        url: "http://localhost/get_info.php",
        method: "POST",
        data: "filter=affiliation",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available

    for(var row in data.name){
        $scope.affiliationTable.push({id:data.name[row][0], desc:data.name[row][1]});
    }
});

1 个答案:

答案 0 :(得分:1)

尝试

<tr ng-repeat="row in tableData">
    <!--{{row.name}}-->
    <td><a href='#' ng-click="invokeModal(row);" id="{{row.id}}">{{row.name}}</a>

    </td>
    <td>{{row.active}}</td>
    <td>{{row.end_date}}</td>
    <td>{{row.start_date}}</td>
</tr>

$scope.invokeModal = function (row) { //memberDescription
    $scope.selectedMembershipDescription = row.desc;
    $scope.selectedMembershipId = row.id;
    $scope.selectedEndDate = row.end_date;
    $scope.selectedStartDate = row.start_date;

    angular.forEach($scope.affiliationTable, function (affiliation) {
        if (affiliation.id == row.id) {
            $scope.affiliation = affiliation;
        }

    })
    jQuery("#mem").modal('show');
};