0

so I've just started converting an old site in progress to use angular instead of jquery, because of the seamless data binding.

now I have this select that is being populated with a dataSet;

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

When a user clicks on an anchor tag in a table, I want the corresponding 'affiliation' to be selected in the select, so my table looks like this;

<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>

and here's the code I used to attempt to select a specific option;

$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');
};

Of course after trying this code out, and a few other options, my select still has no option populated.

can someone help me please.

EDIT here's how the tables are populated;

$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]});
    }
});
4
  • How do you match a with option? Are they having same index or something else? Commented Oct 2, 2013 at 10:23
  • 1
    you have a spelling mistake in ng-model="affilation", i think it should be ng-model="affiliation " , because in invokeModal you are setting $scope.affiliation = $scope.affiliationTable[row]; Commented Oct 2, 2013 at 10:25
  • Thanks Arun, I also noticed I didn't have an index when comparing the ids at $scope.affiliationTable == , so I editted the code again, problem still there though Commented Oct 2, 2013 at 10:30
  • What do the models affiliationTable and tableData look like? Commented Oct 2, 2013 at 10:37

1 Answer 1

1

Try

<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>

and

$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');
};
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.