How to change ng-model dynamically with ng-click controller function

Question

I'm new in AngularJS, and I try to change ng-model dynamically based on ng-click parameter function. So here is the code :

HTML :

<ul class="dropdown-menu" id="search-dropdown-menu">
    <li>
        <a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', '-')">
            -
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', 'kd_jurusan')">
            Kode Jurusan
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', 'nama_jurusan')">
            Nama Jurusan
        </a>
    </li>
</ul>

<input type="text"
    class="form-control input-sm"
    data-ng-model="search"
    placeholder="Cari data . . ."
    autofocus />

AngularJS :

/**
 *  Controller
 */
    akuaApp.controller('akuaController', function($scope)
    {
        $scope.searchFilter = function (model, value) {
            $scope.search = 'search.'+value;
        };
    });

And that is being changed is on the input value, not the data-ng-model value. I tried to read all tutorials but I still did not get it about this. Can someone help me, thanks :)

EDITED : (sorry for my bad English)

So what I want is, lets say I click this

<a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', 'nama_jurusan')">
    Nama Jurusan
</a>

After I click that, I want this data-ng-model attribute value, from search into search.nama_jurusan. nama_jurusan is from searchFilter second parameter.

Note : I was put the data-ng-controller and data-ng-app before

what do you mean by And that is being changed is on the input value, not the data-ng-model value in controller you don't get updated value?? — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Dec 1, 2016 at 4:32

Sajeetharan · Accepted Answer · 2016-12-01 04:30:07Z

1

var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {

  $scope.searchFilter = function(model, value) {
    $scope.search = 'search.' + value;
    alert($scope.search);
  };
});

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="DemoApp"    ng-controller="akuaController">
  
 <ul class="dropdown-menu" id="search-dropdown-menu">
    <li>
        <a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', '-')">
            -
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', 'kd_jurusan')">
            Kode Jurusan
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" data-ng-click="searchFilter('jurusan', 'nama_jurusan')">
            Nama Jurusan
        </a>
    </li>
</ul>

<input type="text"
    class="form-control input-sm"
    data-ng-model="search"
    placeholder="Cari data . . ."
    autofocus />
  
 </body>

</html>

answered Dec 1, 2016 at 4:30

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

imbagila Over a year ago

that is not what i want it. I was edited my post, just check it again

Sajeetharan Over a year ago

@LSNRabbani check if this is what you required plnkr.co/edit/vEg87EVOCEctVw7k4FBf?p=preview

imbagila Over a year ago

your data-ng-model attribute value still search, not either search.kd_jurusan or search.nama_jurusan (on F12)

Collectives™ on Stack Overflow

How to change ng-model dynamically with ng-click controller function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related