简体   繁体   中英

Angularjs: How to get the value of modal and set it the current page

I have a table and each row has a username and role input box. What I want to do is when the user click the open modal button in each row. The modal will show and he is able to choose what level of owner he like. For example he choose the owner 1 and click the button Get info . The current page row will set the owner 1 to ng-model="row.role" the Admin will become `owner 1 or 2 or 3.

My problem is I don't know how to passed the value of getInfo to my ng-model . Can someone help me how to figured this? Thanks

This is my fiddle: http://jsfiddle.net/RLQhh/2968/

Sample code in my fiddle:

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.toggleModal = function () {
    $scope.showModal = !$scope.showModal;
};
$scope.users = [{
    'id': 1,
        'username': 'ady',
        'role': 'Admin'
}, {
    'id': 2,
        'username': 'tiu',
        'role': 'Admin'
}, {
    'id': 3,
        'username': 'ert',
        'role': 'Admin'
}];

$scope.setRole = [{
    'id': '1',
    'Owner': 'Owner 1'
}, {
    'id': '2',
    'Owner': 'Owner 2'
}, {
    'id':'3', 'Owner': 'Owner 3'
}];

$scope.getInfo = function(item){
    alert(item);

}

Ok, First of all, add another variable to your controller

$scope.currentId=0;

Then change the open modal button click like this:

<td> <button ng-click="toggleModal(row.id)" class="btn btn-default">Open modal</button></td>

Then toggleModal must change like this:

$scope.toggleModal = function (cid) {
    $scope.showModal = !$scope.showModal;
    $scope.currentId=cid;
};

And finally getInfo changes this way:

$scope.getInfo = function(item){
    alert(" id:"+item.id + "\r\n " + item.Owner);
    $scope.users[$scope.currentId-1].role=item.Owner;

}

Here's a working fiddle:

http://jsfiddle.net/tjs81sy2/ ....

passed in the row selected in the ng-repeat, swapped out the values when click get info Open modal

mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.toggleModal = function (row) {
    $scope.showModal = !$scope.showModal;
    $scope.getInfo = function(item){
        row.role = item.Owner 
    }
};
$scope.users = [{
    'id': 1,
        'username':
   ...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM