在ngRepeat中编辑模型属性,错误未定义

时间:2013-08-28 12:24:51

标签: angularjs angularjs-scope

我对AngularJS缺乏经验。 我已经阅读了一些可能相关的答案,但对我来说还不够清楚。

My code- Plunker

我使用table创建了ngRepeat,我想更改此table中的网站名称 只有在点击save button

之后

但我得error undefined

我的代码:

var webApp = angular.module('webApp', []);


//controllers

webApp.controller ('websitesCtrl', function ($scope, Websites) {
    //$scope.x = new Website('1','3343','32434','name','privKey','pubKey','userID');
    $scope.websites  = Websites.get();



   //This function displayes site details
    $scope.expandWeb = function(website) {
        console.log('expand');
        $scope.websiteNew = angular.copy(website);
        $scope.showName = true;
    };

    $scope.saveWeb = function(websiteNew) {
        $scope.website.name = websiteNew.name;
        $scope.showName = false;
    };
});


//services

webApp.factory('Websites', function(){

    var websites = {};

    websites.get = function() {
        return [{
            id: '1',
            created: '223112',
            updated: '222212',
            name: 'google.com',
            secretKey: 'dhsd#22%$',
            publicKey: '234233@@@',
            userIdentification:'COOKIES'
          },
          {
            id: '2',
            created: '1111112',
            updated: '444412',
            name: 'walla.com',
            secretKey: 'dhsd#22%$',
            publicKey: '234233@@@',
            userIdentification:'NONE-COOKIES'
          },
                    {
            id: '3',
            created: '1111112',
            updated: '444412',
            name: 'Umms.com',
            secretKey: 'dhsd#22%$',
            publicKey: '234233@@@',
            userIdentification:'NONE-COOKIES'
          }

        ]
    };

    return websites;

}); 

我的HTML:

<html ng-app="webApp">

  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller='websitesCtrl'>
    <table >
    <tr ng-repeat="website in websites">
        <td>
            <a href="/websites/{{website.id}}">{{website.name}}</a>
            <button ng-click='expandWeb(website)'>edit name</button>
        </td>
    </tr>
   </table>

    <div ng-show="showName">
      <input ng-model="websiteNew.name"/>
      <button ng-click='saveWeb(websiteNew)'>save</button>
    </div>

   </body>

</html> 

1 个答案:

答案 0 :(得分:0)

$scope.webSite方法中未定义

saveWeb。您应该在expandWeb方法中设置它。

$scope.expandWeb = function(website) {
    console.log('expand');
    $scope.website = website;
    $scope.websiteNew = angular.copy(website);
    $scope.showName = true;
};

http://plnkr.co/edit/beExyHMpXigVlCgJyfkF?p=preview