javascript - ng-click 的 angularjs Restful 应用程序问题

Question

我试图在 angularjs 中实现一个基本的 crud 操作。

但是我无法这样做，因为我的 ng-click 不工作。

我的list.html如下:-

  <div class="container">
          <input type="text" ng-controller="Remove">

            <ul>
              <li ng-repeat="person in people | filter: {age: search}" class="row-{{$first}} | orderBy: 'name'">
                {{person.name}} ,  {{person.age}} 
                <a ng-click="edit(person.name)" >edit</a> 
                <a ng-click="remove(person.name)" >X</a>
                <span ng-show="$first">First</span>
                <span ng-show="$middle">Middle</span>
                <span ng-show="$last">Last</span>
              </li>
            </ul>
</div>

我的 app.js 文件如下:-

angular.module('myApp',['ngRoute'])
    .config(function( $routeProvider){
      $routeProvider
      .when('/',{
        templateUrl: 'list.html',
        controller: 'Ctrl'
      })
      .when('/edit/:id',{
        templateUrl: 'edit.html',
        controller: 'Edit'
      })
      .when('/add',{
        templateUrl: 'add.html',
        controller: 'Add'
      })
     .when('/remove',{
        templateUrl: 'remove.html',
        controller: 'Remove'
      })

    .when('/login',{
        templateUrl: 'login.html',
        controller: 'LoginCtrl'
      })
}) 
// end of config --routes

    .run(function($rootScope){
          $rootScope.people =[
              {
                name: "Johna", 
                age: 23
              },
              {
                name: "Shamit",
                age: 74
              },
              {
                name: "Prath",
                age: 20
              },
              {
                name: "Surya",
                age: 28
              },
              {
                name: "Hari",
                age: 13
              }
            ];
})
    .controller('Ctrl',['$scope','$rootScope',function(scope,$rootScope){
       // console.log(scope);
            scope.addStatus = true;
            scope.name = "Rafal";
            scope.age = "28";
            scope.persons=['Tom', 'Jerry']; 

//          scope.remove = function(index){
//             scope.people.splice(index, 1);
//          };

          scope.save = function(){
            scope.addStatus = true;
            scope.person = [];
          };

    }])
    .controller('Edit',['$scope','$rootScope','$routeParams',function(scope,$rootScope,$routeParams){
        scope.edit = function(index){
            console.log("The first edit");
            scope.addStatus = false;
            scope.person = $rootScope.people[$routeParams.id];
          };   

    }])
    .controller('Add',['$scope','$rootScope',function($scope,$rootScope){
         $scope.add = function(){
            $rootScope.people.push($scope.person);
             console.log($scope.person)
            $scope.person ={};
          };
    }])

    .controller('Remove',function($scope,$rootScope){
      $scope.people=$rootScope.people;   
      $scope.remove = function(name){
            var index = getSelectedIndex(name);
            alert(index)
             $rootScope.people.splice(index, 1);
          };

    })



  //The below is for login basic controller..check below

    .controller("LoginCtrl",["$scope",'Auth',function($scope,Auth){

  console.log("heyy")

  $scope.login = function(){

     Auth.signin({
      email:$scope.email,
      password:$scope.password  
    })
  };

   $scope.register = function(){

    Auth.signup({
      email:$scope.email,
      password:$scope.password  
    })

  };

}]);

  function getSelectedIndex(name){
        for(var i=0;i<$rootScope.people.length;i++)
            if($rootScope.people[i].name==name)
                console.log(name);
                return i;
        return -1;
    };

//});

我无法触发 ng-click，因此无法在页面上进行编辑和删除。请帮我解决这种情况。

Answer 1

对于“ anchor ”标签，href 是强制性的，以使其可点击。

我们可以使用 href="#"/href="javascript:void(0)"作为虚拟链接

这样使用

<a href="javascript:void(0)" ng-click="edit(person.name)">edit</a> 
<a href="javascript:void(0)" ng-click="remove(person.name)">X</a>

在这种情况下，建议使用“javascript:void(0)”，因为它不会导致 ngroute/ui-route 出现问题

同时将 $scope.edit 和 $scope.remove 方法移动到 Ctrl Controller