AngularJS在ng-repeat中获取标签的HTML内部值

您好，我想用angularjs获取一个标签的值，并且我已经尝试过：

var photoName=angular.element('label[id=photoLbId]').val();

结果未定义，同时输入类型的无线电正在工作

var ans1 = angular.element('input[name=answer1]:checked').val();

如何使用angularjs获取标签的html值？这是标签的 HTML 代码：

<ul id="navlist" style="list-style: none; width: 1000px;">
    <li ng-repeat="item in stepsUrlPhotosList track by $index"  style="display: inline; width: 1000px;">
       <label id="photoLbId" for="photoId">{{item.name}}</label>
       <img id="photoId" style="width: 30%;max-height:300px ;" ng-src="{{item.photoUrl}}">
    </li>
</ul>

这是来自角度代码的指令：

app.directive('quiz',['$http',function(answerList1) {
    return {
        restrict: 'AE',
        scope: {},
        templateUrl: 'template.html',
        controller : ['$scope', '$http','answerList1',, function ($scope,$http,answerList1) {

            $scope.checkAnswer1 = function() {
                console.log('Checking elements..... '+angular.element('input[name=answer1]:checked').val());
                var ans1 = angular.element('input[name=answer1]:checked').val();

                console.log('Checking label.....'+angular.element('label[id=photoLbId]').val());
                var photoName=angular.element('label[id=photoLbId]').val();
                answerList1.push(photoName+' '+ ans1);
            };
        }]
    }
}]);

你需要使用$scope变量，你可以访问变量并通过ng-click获取值

演示

var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
  function($scope) {
    $scope.stepsUrlPhotosList= 
     [{
        "OwnerID": 1,
        "Comment": "Charlotte is brilliant. A lovely person. Thank you!",
        "rating": 4
      }, {
        "OwnerID": 2,
        "Comment": "The best dog carer ever! She is amazing",
        "rating": 4
      }]    ;  
  
    $scope.display = function(item){
       alert(item.rating);
    }
  }
]);

<!DOCTYPE html>
<html>
<head> 
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-app='app'>
  <div ng-controller="ListCtrl">
    <ul>
      <li ng-repeat="item in stepsUrlPhotosList" ng-click="display(item)">
          {{item}}
      </li>
    </ul>
  </div>
</body>
</html>

这将起作用。

var El = angular.element(document.querySelector('#photoLbId'));
var value = El.val();

相关内容

最新更新

热门标签：