CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
Hary
Hary

Reputation: 5818

Angularjs Model Array Not updating with Template

I've created the template with the below code. The edit functionality works fine however the model is updating back.

In the template, I've binded the model with ng-model but still it is not updating the model hobbies back on editing

Any ideas?

<html>
<head>
<title>
Angular Edit Template
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.js"></script><!-- Latest compiled and minified CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>

<script type="text/javascript">

angular.module('myApp', [])
    .controller('myCtrl', function($scope){
        $scope.hobbies = ["Swimming", "Reading"]
    })
    .directive('component', function(){
          return {
             template: [
               '<div>',
               '<span ng-show="!editing">{{ value }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
               '<span ng-show="editing"><input type="input" ng-model="value"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',
               '</div>'  
             ].join(''),
             restrict: 'E',
             scope: {
                value: '=value'
             },
             link: function($scope){
                 $scope.editing = false;
             }
          }
    });

</script>
</head>
<body>
<div id="test" ng-app="myApp" ng-controller="myCtrl">

    <ul ng-repeat="n in hobbies">
    <li>
    <component value="n"></component>
    </li>
    </ul>


    <span>{{ hobbies }}</span>
</div>
</body>
</html>

Upvotes: 1

Views: 42

Answers (1)

kendavidson
kendavidson

Reputation: 1460

Take a look at this, the issue is you're two way binding a string, instead of an object, which means you're not actually getting the benefits: If you are not using a .(dot) in your AngularJS models you are doing it wrong?

If you use an object in either your parent, either passing the value or the whole object, you'll see that it works a little better.

$scope.hobbies = [{id:1,name:"Swimming"},{id:2,name:"Reading"}]

and then 

<ul ng-repeat="n in hobbies">
  <li>
    <component value="n.name"></component>
  </li>
</ul>

or 

'<span ng-show="!editing">{{ value.name }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
'<span ng-show="editing"><input type="input" ng-model="value.name"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',

Upvotes: 1

Related Questions