CODEWITHSUNDEEP
angularjskendo-ui
Rodrigo Rodrigues
Rodrigo Rodrigues

Reputation: 669

Two-way bind does not work if the model is something like ng-model="record.name" for Kendo UI controls

I have a problem with Kendo UI controls

My HTML

 <input type="text" ng-model="record.name" kendo-numeric-text-box />
 <input type="text" ng-model="record.name"> </input>
 <button ng-click="resetRecord()" >test bind</button>

My test.js

$scope.record ={};
$scope.resetRecord= function(){
        $scope.record = {};
    }

Well, when I execute the function resetRecord just the standard input clear, the kendo ui input does not clear, I've tried $scope.record =null and it does not work either.

if I change to code below, it works, but I need it works like above

$scope.resetRecord= function(){
        $scope.record. name = null;
    }

it happens with all input Kendo UI, not just kendo-numeric-text-box

if there is a way to iterate with record object, discovering all the "properties", such as name it will work for me.

My intention is just have one controller for all CRUD screen of the system, I wouldn't like to write one controller with model definition for each entity of the system. is it a bug?

UPDATED - SOLVED

Solution 1 As runTarm said in solution 2. 

for (prop in $scope.model.record) {
            $scope.model.record[prop]='';
        }

Solution 2 Just add the attribute k-rebind to the Kendo UI controls and it will update it's content according ng-model.

input type="text" ng-model="record.name" k-rebind="record.name" kendo-numeric-text-box />

Upvotes: 1

Views: 4575

Answers (1)

runTarm
runTarm

Reputation: 11547

This is not a bug, but a common issue due to the Prototypal Inheritance characteristic of JavaScript Object. I would recommend reading Understanding-Scopes for more detail.

You could avoid the problem by storing the record in another object, instead of in $scope directly. For example:

$scope.model = {};
$scope.model.record = {};
$scope.resetRecord = function() {
  $scope.model.record = {};
}

Also change your ng-model:

<input type="text" ng-model="model.record.name" kendo-numeric-text-box />
<input type="text" ng-model="model.record.name"> </input>
<button ng-click="resetRecord()" >test bind</button>

Or if you wouldn't want to add the extra model., an alternative solution is what you have mentioned.

You could iterate over object's properties and delete them all like this:

for (prop in $scope.record) {
  delete $scope.record[prop];
}

Hope this helps.

Upvotes: 1

Related Questions