使用AngularJS,我如何在DOM中使用公共变量?

时间:2018-01-17 16:37:13

标签: angularjs

使用AngularJS我将用户发送到一个页面,该页面具有基于他们在上一页上选择的员工的查询字符串。我正在正确记录此变量users,但我无法在DOM中使用ng-if。当来自DOM的ng-if等于来自JS的user.ID时,我想使用user

HTML是:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">

    <div class="ProfileSheet" ng-repeat="user in users" ng-if="user.ID == user">
      <h3 class="heading">User Profile</h3>
      <table id="Profile">
        <tr>
          <th>User</th>
          <td>{{user.Title}}</td>
        </tr>
        <tr>
          <th> User Admin ID</th>
          <td>{{user.ID}}</td>
        </tr>
      </table>
      <br>

  </div>
</div>

JS是:

var app = angular.module('myApp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $http, $q){

    var getQueryString = function (field, url){
        var href = url ? url : window.location.href;
        var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
        var string = reg.exec(href);
        return string ? string[1] : null;
    }

    var users = getQueryString('users', window.location.href)

   $(document).ready(function() {
        console.log(users);
  });

我该如何做到这一点?

奖励:如果选择了多个用户,如何使ng-repeat正常工作。例如:如果查询字符串将用户返回为19,21和25,则ng-repeat当前查找的用户ID为19,21,25。不是三个单独的项目。

2 个答案:

答案 0 :(得分:0)

设置import UIKit import PlaygroundSupport import CoreImage class TestViewController : UIViewController { var CIFilterNames = [ "CIPhotoEffectChrome", "CIPhotoEffectFade", "CIPhotoEffectInstant", "CIPhotoEffectNoir", "CIPhotoEffectProcess", "CIPhotoEffectTonal", "CIPhotoEffectTransfer", "CISepiaTone" ] let buttonWidth: CGFloat = 70 let buttonHeight: CGFloat = 70 let gapBetweenButtons: CGFloat = 5 override func viewDidLoad() { super.viewDidLoad() // create a UIScrollView let filterScrollView = UIScrollView() // we will set the auto-layout constraints filterScrollView.translatesAutoresizingMaskIntoConstraints = false // set background color so we can see the scrollView when the images are scrolled filterScrollView.backgroundColor = .orange // add the scrollView to the view view.addSubview(filterScrollView) // pin scrollView 20-pts from bottom/leading/trailing filterScrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20.0).isActive = true filterScrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20.0).isActive = true filterScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20.0).isActive = true // scrollView height is 80 filterScrollView.heightAnchor.constraint(equalToConstant: 80).isActive = true // create a UIStackView let stackView = UIStackView() stackView.spacing = gapBetweenButtons // we will set the auto-layout constraints stackView.translatesAutoresizingMaskIntoConstraints = false // add the stackView to the scrollView filterScrollView.addSubview(stackView) // with auto-layout, scroll views use the content's constraints to // determine the contentSize, // so pin the stackView to top/bottom/leading/trailing of the scrollView // with padding to match the gapBetweenButtons stackView.leadingAnchor.constraint(equalTo: filterScrollView.leadingAnchor, constant: gapBetweenButtons).isActive = true stackView.topAnchor.constraint(equalTo: filterScrollView.topAnchor, constant: gapBetweenButtons).isActive = true stackView.trailingAnchor.constraint(equalTo: filterScrollView.trailingAnchor, constant: -gapBetweenButtons).isActive = true stackView.bottomAnchor.constraint(equalTo: filterScrollView.bottomAnchor, constant: -gapBetweenButtons).isActive = true // loop through the images for i in 0..<CIFilterNames.count { // create a new UIButton let filterButton = UIButton(type: .custom) filterButton.tag = i // we will set the auto-layout constraints, and allow the stackView // to handle the placement filterButton.translatesAutoresizingMaskIntoConstraints = false // set the width and height constraints filterButton.widthAnchor.constraint(equalToConstant: buttonWidth).isActive = true filterButton.heightAnchor.constraint(equalToConstant: buttonHeight).isActive = true filterButton.layer.cornerRadius = 6 filterButton.clipsToBounds = true filterButton.addTarget(self, action: #selector(filterButtonTapped(_:)), for: .touchUpInside) // this example doesn't have your images, so // set button title and background color filterButton.setTitle("\(i)", for: .normal) filterButton.backgroundColor = .blue // //Code for filters will be added here // // let ciContext = CIContext(options: nil) // let coreImage = CIImage(image: originalImage.image!) // let filter = CIFilter(name: "\(CIFilterNames[i])") // filter!.setDefaults() // filter?.setValue(coreImage, forKey: kCIInputImageKey) // let filteredImageDate = filter!.value(forKey: kCIOutputImageKey) as! CIImage // let filteredImageRef = ciContext.createCGImage(filteredImageDate, from: filteredImageDate.extent) // let imageForButton = UIImage(cgImage: filteredImageRef!) // // // Asign filtered image to the button // filterButton.setBackgroundImage(imageForButton, for: .normal) // add the image view to the stackView stackView.addArrangedSubview(filterButton) } } func filterButtonTapped(_ sender: Any?) -> Void { if let b = sender as? UIButton { print("Tapped:", b.tag) } } } let vc = TestViewController() vc.view.backgroundColor = .red PlaygroundPage.current.liveView = vc 而不是$scope.users。模板代码使用范围变量:您在模板中调用var users的内容实际上是控制器中的var_name

答案 1 :(得分:0)

我可以使用$scope.selectedusersng-if="user.ID == selectedusers执行此操作。使用$scope.users导致错误可能是因为使用了ng-repeat = "user in users"