change values of a multiple selector and that only affects its row, in dynamic form

0

If the title sounds strange but I explain, I have a column called "type_account" and another "accuount", what happens is that I have to load accounts according to the "type_account" that I select now the accounts I call them of different services, but what is the problem that when I select a "type_account" affects all the columns that I have in "accounts" they change all, I need that only affects its row and only the value of its row is changed.

Now the image is not noticeable but there is a button that says "add row" adds rows dynamically in the form.

the angular code:

var transactionCoverData = {};
var transactionDetailData = {};
$scope.userDropDown = false;
$scope.proveedorDropDown = false;
planaccountsfactory.getPlanAccounts().then(function (response) {
   $scope.planAccounts = response.data;
});
usersFactory.getUsers().then(function (response) {
    $scope.userDatos = response.data;
});
providersFactory.getProviders().then(function (response) {
    $scope.proveedorDatos = response.data;
});
$scope.subcuentasChange = function (type)
{
    console.log(type);
    if(type === 'usuario')
    {
        $scope.userDropDown = true;
        $scope.proveedorDropDown = false;
    }
    if(type === 'proveedor')
    {
        $scope.userDropDown = false;
        $scope.proveedorDropDown = true;
    }
};
//add row
$scope.detalleTransCover = {
    details: []
};
$scope.addDetail = function () {
    $scope.detalleTransCover.details.push({});
};

now the html is:

<tr ng-repeat="detail in detalleTransCover.details track by $index">
    <td>
        <select class="form-control" ng-model="detail.plan_account_id" ng-options="planAcoount.id as (planAcoount.tipo_cuenta + ' -- ' + planAcoount.descripcion) for planAcoount in planAccounts"></select>
    </td>
    <td>
        <input type="text" class="form-control" ng-model="detail.glosa" >
    </td>
    <td>
        <input type="text" value="0" class="form-control" ng-model="detail.debeDolar" >
    </td>
    <td>
        <input type="text" value="0" class="form-control" ng-model="detail.haberDolar" >
    </td>
    <td>
        <input type="text" value="0" class="form-control" ng-model="detail.debeBolivianos" >
    </td>
    <td>
        <input type="text" value="0" class="form-control" ng-model="detail.haberBolivianos" >
    </td>
    <td>
        <select class="form-control" ng-model="detail.type_account" ng-change="subcuentasChange(detail.type_account)">
            <option value="usuario">EMPLEADO</option>
            <option value="proveedor">PROVEEDOR</option>
            <!--<option value="cliente">CLIENTE</option>
            <option value="activo">ACTIVO FIJO</option>-->
        </select>
    </td>
    <td>
        <select class="form-control" ng-show="proveedorDropDown" ng-model="detail.account_id" ng-options="proveedor.id as proveedor.razon_social for proveedor in proveedorDatos"></select>
        <select class="form-control" ng-show="userDropDown" ng-model="detail.account_id" ng-options="user.id as user.name for user in userDatos"></select>
    </td>
</tr>
    
asked by CoolLife 29.06.2017 в 21:08
source

1 answer

1

The problem is that you are having only one variable in the $ scope to handle the state of all the combos in the view. You should have one variable per row to handle each combo.

In my case, I would do it in the following way:

Change in Account_type

ng-change="subcuentasChange(detail.type_account)"

a

ng-change="subcuentasChange(detail)"

sub-accountsChange

$scope.subcuentasChange = function (detail)
{
    if(detail.type_account === 'usuario'){
        detail.proveedorDropDown= false;
    }else{
       detail.proveedorDropDown= true;
    }
};

Selects

<select class="form-control" ng-show="detail.proveedorDropDown" ng-model="detail.account_id" ng-options="proveedor.id as proveedor.razon_social for proveedor in proveedorDatos"></select>
<select class="form-control" ng-show="!detail.proveedorDropDown" ng-model="detail.account_id" ng-options="user.id as user.name for user in userDatos"></select>

I hope this approach is helpful, anything, do not hesitate to ask again. Greetings

    
answered by 29.06.2017 / 23:12
source