CODEWITHSUNDEEP
angularjsasp.net-web-apiangularjs-ng-model
Pat Migliaccio
Pat Migliaccio

Reputation: 1070

Data-binding ng-model with object but display a value in field

I am new to AngularJS and I am trying to wrap my head around a certain concept. I have figured out how to successfully perform one way data binding but still can't think of the best way of performing a two way bind with a complex object.

HTML

<input type="text" placeholder="Project Lead" ng-model="currentproject.projectLeader.name" />

JS

$scope.ViewProject = function (project) {
    $http.get('api/projects/' + project.id)
        .success(function (data) {
            $scope.currentproject = data;
        })
        .error(function (error) {
            $scope.status = 'Unable to load selected project data: ' + error.message;
        });
    };

To simplify things, projectLeader has projectLeader.id and projectLeader.name.

I am trying to bind the full projectLeader object to the input field but I want the value of the input to display only the project name. Does this make sense? How would I go about retrieving the new projectLeader when the field changes? Is it best to do an ng-change on that field that calls another request to the server with the name inputted to retrieve the id for that person? Then modify the scope?

Upvotes: 0

Views: 1906

Answers (1)

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

Dont bind the entire object to the input field. Bind only the name to the input text. Don't use ng-change, ng-change will be fired every time sompone changes the input field, so whenever the user presses a key ng-change will fire the method to save the data. Instead put a button to submit, or you can do it on enter press. I will try to put up a fiddle for you.

Upvotes: 2

Related Questions