How to get values of a custom html element in Angular Js?

Question

I'm using Angular, a bootstrap admin web app to create my web application, the problem I'm facing is how to read values from angular element.

This is how the element looks like.

<ui-select  ng-model="selected" theme="bootstrap" ng-change='test()'>
<ui-select-match  placeholder="Select by typing client's name or number">{{$select.selected.first_name}}</ui-select-match>
<ui-select-choices ng-value='mikeee' group-by="'group'" repeat="id_number in clients_list | filter: $select.search">
          <span ng-bind-html="id_number.first_name + ' - ' | highlight: $select.search"></span>
          <small ng-bind-html="id_number.registration_number | highlight: $select.search"></small>
        </ui-select-choices>
      </ui-select>

And the test() function:

$scope.test = function()  
{
    var selectedValue = $.param({
        client_number : $scope.selected,
    });

    alert(selectedValue)
}

When the value in the element changes, I get an alert box but the Client_number is empty. Thank you.

Are you trying to serialize data?

Nikhil Mohanan
– Nikhil Mohanan

2016-10-31 07:24:44 +00:00
Commented Oct 31, 2016 at 7:24 — Nikhil Mohanan
– Nikhil Mohanan, Commented Oct 31, 2016 at 7:24
@Nikhil, no just the value when a user makes a selection.

mikie
– mikie

2016-10-31 07:49:08 +00:00
Commented Oct 31, 2016 at 7:49 — mikie
– mikie, Commented Oct 31, 2016 at 7:49

Nikhil Mohanan · Accepted Answer · 2016-10-31 08:05:24Z

angular
  .module('myApp', [])
  .run(function($rootScope) {
    $rootScope.title = 'myTest Page';
  })
  .controller('testController', ['$scope',
    function($scope) {

      $scope.test = function() {
        var selectedValue = serializeData({
          client_number: $scope.selected
        });

        alert(selectedValue)
      }



      function serializeData(data) {
        // If this is not an object, defer to native stringification.
        if (!angular.isObject(data)) {
          return ((data == null) ? "" : data.toString());
        }

        var buffer = [];

        // Serialize each key in the object.
        for (var name in data) {
          if (!data.hasOwnProperty(name)) {
            continue;
          }

          var value = data[name];

          buffer.push(
            encodeURIComponent(name) + "=" + encodeURIComponent((value == null) ? "" : value)
          );
        }

        // Serialize the buffer and clean it up for transportation.
        var source = buffer.join("&").replace(/%20/g, "+");
        return (source);
      }
    }
  ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input ng-app="myApp" ng-controller="testController" ng-model="selected" theme="bootstrap" ng-change='test()' />

For normal text input and select box, it works well and I can get the value. The problem comes in when I try to do the same on a custom controller element. <ui-select>...</ui-select>

Collectives™ on Stack Overflow

How to get values of a custom html element in Angular Js?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related