angularjs获取ng-repeat内标签的html内部值答案

【问题标题】：angularjs get html inner value of the label inside ng-repeatangularjs获取ng-repeat内标签的html内部值
【发布时间】：2017-01-07 19:18:01
【问题描述】：

您好，我想用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);
            };
        }]
    }
}]);

【问题讨论】：

标签： angularjs

【解决方案1】：

您需要使用$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>

【讨论】：

嗨，谢谢您的帮助，但我的角度代码在指令中，并且控制器是动态创建的，因此我无法使用您的解决方案，我想从角度访问 html 标签元素，与文档类似。 getElementById("myId")
发布您的指令

【解决方案2】：

这会起作用。

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

【讨论】：

虽然我还在 value 属性中添加了迭代结果值，但我得到了未定义：{{ item.name}}